Javascript: wie man mehrere Daten in Ajax oder JSON sendet

Es tut mir leid, aber ich bin verwirrt, wenn es wirklich AJAX oder JSON, ich bin nicht gut in dieser Sprache. aber mein Problem ist 2 Listbox Wert senden. das Jahr und der Monat. Das Jahr wird die data-basic-colm-ajax.php sendet, aber ich weiß nicht, wie der MonatJavascript: wie man mehrere Daten in Ajax oder JSON sendet

hier ist mein Code zu senden: Ihnen

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

Viele

Quelle

2016-11-18 ooo-Ghost-ooo

'AJAX' ist der Ansatz, eine asynchrone Anfrage an Ihren Server zu stellen, während' JSON' das Notat ist Sie schreiben Ihre Objekte, damit Ihr Client und Server miteinander kommunizieren und Daten austauschen können. Beide arbeiten Hand in Hand. –

Id2 wird deklariert aber nie benutzt. Sie übergeben Id nur an die Funktion getAjaxData – Magrangs

oh. Danke .. –

ich meine Codes nur ändern

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

Quelle

2016-11-18 16:46:17

Sie übergeben eine Variable namens 'Daten' zu GetAjaxData, aber Sie verwenden es nicht wirklich. Du könntest es genauso gut loswerden. – Magrangs

Javascript: wie man mehrere Daten in Ajax oder JSON sendet

Antwort

Verwandte Themen