如何向服务器发送请求并获取数据

How to send a request to the server and get the data

本文关键字：请求 获取 数据 服务器      更新时间：2023-09-26

我已经写了下面的代码，可以让我画一个图表。

<html>
  <head>
  </head>
  <body>
    <select id="ChartType" name="ChartType" onchange="drawChart()">
 <option value = "PieChart">Select Chart Type
 <option value="PieChart">PieChart
 <option value="Histogram">Histogram
 <option value="LineChart">LineChart
 <option value="BarChart">BarChart
  </select>
  <div id="chart_div" style="border: solid 2px #000000;" ></div>
  <p id="demo"></p>
  <p id="demo1"></p>
          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
         function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');    
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 4],
          ['Olives', 1],
          ['Zucchini', 5],
          ['Pepperoni', 2]
        ]);
        var a = document.getElementById("ChartType").value;
          document.getElementById("demo1").innerHTML = "You selected: " + a;
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300
                       };
         // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
        chart.draw(data, options);

        }
    </script>
  </body>
</html>

然而，这里我的值是固定的。我想通过向服务器发送请求从服务器读取这些值，并获得所需的值，然后将这些值传递给我的代码。谁能帮我做同样的事?

HTML (index.html)代码应该是-

<html>
<head>
</head>
<body>
 <select id="ChartType" name="ChartType" onchange="drawChart()">
 <option value = "PieChart">Select Chart Type
 <option value="PieChart">PieChart
 <option value="Histogram">Histogram
 <option value="LineChart">LineChart
 <option value="BarChart">BarChart
  </select>
<div id="chart_div" style="border: solid 2px #000000;"></div>
<p id="demo"></p>
<p id="demo1"></p>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var row = [];
var temp;
var stri;
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(getValues);
     function getValues() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        stri = xmlhttp.responseText;
            drawChart();
        }
    };
    xmlhttp.open("GET", "values.php?q=val", true);
    xmlhttp.send();
    }
    function drawChart() {
    var data = new google.visualization.DataTable();
    str = stri.split(",");
    for(i = 0; i<str.length-1; i++)
    {
        if(str[i].split("_")[0] == "Column")
        {
            data.addColumn(str[i].split("_")[1], str[i].split("_")[2]);
        }
        else
        {    
            temp = [str[i].split("_")[1], parseInt(str[i].split("_")[2])];
            row.push(temp);
        }
    }
    data.addRows(row);
    var a = document.getElementById("ChartType").value;
    document.getElementById("demo1").innerHTML = "You selected: " + a;
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300
                   };
    var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
    chart.draw(data, options);
    }
</script>

PHP (values.php)代码应该是-

<?php
if($_REQUEST["q"]=="val")
// You can get these data from database also.
$a[] = "Column_string_Topping";
$a[] = "Column_number_Slices";
$a[] = "Rows_Mushrooms_3";
$a[] = "Rows_Onions_4";
$a[] = "Rows_Olives_1";
$a[] = "Rows_Zucchini_5";
$a[] = "Rows_Pepperoni_2";
foreach($a as $name)
{
    echo $name.",";
}
?>
将HTML和PHP文件放在同一个目录下。

使用ajax调用从服务器获取数据(get/post)使用响应填充数据

使用jquery的get请求看起来像这样-

$.get('http://you-domain.com/get-data/', function(res){
    // res will contain the data from the server
    // you can use it to update the local data before refrehing the graph.
});

您需要做一个ajax调用从服务器检索数据，然后将返回的json加载到DataTable函数中。

var jsonData = $.ajax({
    url: "getData.php",
    dataType: "json",
    async: false
    }).responseText;
var data = new google.visualization.DataTable(jsonData);

JSON数据必须以Google Charts参考文档中列出的格式从服务器返回。

相关文章：