繁体   English   中英

Javascript:如何在Ajax或Json中发送多个数据

[英]Javascript: how to send multiple data in Ajax or Json

对不起,但是如果真的是AJAX或JSON,我会感到困惑,我不太擅长此语言。 但是我的问题是发送2个列表框值。 年和月。 今年发送到data-basic-colm-ajax.php但我不知道如何发送月份

这是我的代码:

 <script type="text/javascript">
        $(document).ready(function() {
            //default

            getAjaxData(new Date().getFullYear());

            $('.dynamic_data').change(function() {
                var id = $('#year').val();
                var id2 = $('#month').val();
                getAjaxData(id);
            });

            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'Highcharts Chart PHP with MySQL Example',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Subtitle',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'TOTAL'
                    },
                    plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y}'
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    shadow: true
                },
                series: []
            };
            function getAjaxData(id) {
                $.getJSON("data-basic-colm-ajax.php", {id:id}, function(json) {
                    options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
                    options.series[0] = json[1];                        
                    chart = new Highcharts.Chart(options);
                });
            }

        });
    </script>

    <script src="/MyCharts/highcharts/js/highcharts.js"></script>


</head>
<body>
    <a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a>
    <div class="menu_top" >
        Year:
        <select class="dynamic_data" id="year">
            <option value="2016" >2016</option>
            <option value="2015">2015</option>
            <option value="2011">2011</option>
        </select>
        Month:
        <select id="month">
            <option value="1" selected>Jan</option>
            <option value="2">Feb</option>
            <option value="3">Mar</option>
        </select>

    </div>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>

谢谢

我只是将代码更改为

<script type="text/javascript" src="/MyCharts/highcharts/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //default

            getAjaxData(new Date().getFullYear());

            $('.dynamic_data').change(function() {
                var id = $('#year').val();
                var id2 = $('#month').val();
                var data = {id:id ,id2:id2};
                getAjaxData(data);
            });

            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'Highcharts Chart PHP with MySQL Example',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Subtitle',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'TOTAL'
                    },
                    plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y}'
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    shadow: true
                },
                series: []
            };
            function getAjaxData(data) {
                var year = $('#year').val();
                var month = $('#month').val();
                $.getJSON("data-basic-colm-ajax.php",{id:year ,id2:month}, function(json) {
                    options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
                    options.series[0] = json[1];                        
                    chart = new Highcharts.Chart(options);
                });
            }

        });
    </script>

    <script src="/MyCharts/highcharts/js/highcharts.js"></script>


</head>
<body>
    <a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a>
    <div class="menu_top" >
        Year:
        <select class="dynamic_data" id="year">
            <option value="2016" >2016</option>
            <option value="2015">2015</option>
            <option value="2011">2011</option>
        </select>
        Month:
        <select id="month">
            <option value="1" selected>Jan</option>
            <option value="2">Feb</option>
            <option value="3">Mar</option>
        </select>

    </div>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM