Javascript：如何在Ajax或Json中發送多個數據

Im sorry，but im confused if it really AJAX or JSON，I am not good at this language。但我的問題是發送2列表框的值。年份和月份。全年發送到data-basic-colm-ajax.php但我不知道如何月份Javascript：如何在Ajax或Json中發送多個數據

這裏給我的代碼：

<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>

謝謝

來源

2016-11-18 ooo-Ghost-ooo

'AJAX'是向您的服務器發出異步請求的方法，而'JSON'是notat您可以編寫對象，以便您的客戶端和服務器可以相互通信和傳遞數據。兩者齊頭並進。 –

Id2已聲明但從未使用過。你只是將Id傳入getAjaxData函數 – Magrangs

哦。謝謝.. –

我只是改變我的代碼，以

<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>

來源

2016-11-18 16:46:17

你傳遞一個名爲'data'的變量給getAjaxData，但你並沒有真正使用它。你也可以擺脫它。 – Magrangs

Javascript：如何在Ajax或Json中發送多個數據

回答

相關問題