从html表单传递变量，google图表ajax请求json数据 - Passing Variable from html form, google chart ajax request for json data

我试着四处寻找问题的解决方案，但找不到。

我想知道是否有人能帮我。

基本上，我试图让用户输入一个变量，这样他们就可以看到一个谷歌图表，其中包含他们特别要求的数据。

不过，该图表被设置为对另一个php脚本执行ajax json请求。

这是我的密码。（我故意省略了不相关的代码。）

HTML表单，

<form id="form" action="http://localhost/query/CHART.php" method="POST">
  <div><label for="VARIABLE">Enter Variable or % For All Variables:
  <input type="text" name="VARIABLE" id="VARIABLE"/>
  </label>  
</div>
    <br />
    <div class="submit-button"><input type="submit" value="Get Data"/></div>
</form>

谷歌图表PHP页面

 include "C:'wamp'www'includes'header.php";

<div id="content">
<br>
     <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {'packages':['corechart']});
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
        function drawChart() {
          var jsonData = $.ajax({
              type: "POST",
              url: "http://localhost/query/MEAS.php",
              dataType:"json",
              async: false
              }).responseText;
          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(jsonData);

PHP.JSON查询（MEAS.PHP）

  <?php

$conn = mysqli_connect('***', '***', '***');
if (!$conn) {
    echo "Unable to connect to DB: " . mysql_error();
    exit;
}
if (!mysqli_select_db($conn, "TRACK")) {
    echo "Unable to select mydbname: " . mysql_error();
    exit;
}

$result = $conn->query("SELECT VARIABLE, var1, var2, var3, var4 FROM MEASTEST WHERE VARIABLE LIKE '$VARIABLE'
");    
// creates column nsmes, nothing to do with query //  
    $table = array();
    $table['cols'] = array(
    array('id' => "", 'label' => 'VARIABLE', 'pattern' => "", 'type' => 'string'),
    array('id' => "", 'label' => 'VAR1', 'pattern' => "", 'type' => 'number'),
    array('id' => "", 'label' => 'VAR2', 'pattern' => "", 'type' => 'number'),
    array('id' => "", 'label' => 'VAR3', 'pattern' => "", 'type' => 'number'),
    array('id' => "", 'label' => 'VAR4', 'pattern' => "", 'type' => 'number'),

    );
    $rows = array();
    while ($nt = $result->fetch_assoc())
    {
    $temp = array();
    $temp[] = array('v' => $nt['VARIABLE'], 'f' =>NULL);
    $temp[] = array('v' => $nt['VAR1'], 'f' =>NULL);
    $temp[] = array('v' => $nt['VAR2'], 'f' =>NULL);
    $temp[] = array('v' => $nt['VAR3'], 'f' =>NULL);
    $temp[] = array('v' => $nt['VAR4'], 'f' =>NULL);
    $rows[] = array('c' => $temp);
    }
    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
    echo $jsonTable;


if (!$result) {
    echo "Could not successfully run query ($sql) from DB: " . mysql_error();
    exit;
}
if (mysqli_num_rows($result) == 0) {
    echo "No rows found, nothing to print so am exiting";
    exit;
}

?>

结果是，谷歌图表页面没有加载图表，因为变量没有传递给查询，也没有json数据返回页面。

希望这是有道理的！

编辑：我在发布时确实故意省略了代码，但它让人困惑，现在已经有了完整的php页面。

感谢

编辑：

您的代码不轻，您向"MEAS.php"发送Ajax请求？？

哪一个是"MEAS.php"的代码？？

如果"MEAS.php"是：

<?php
$VARIABLE = $_POST['VARIABLE'];
$conn = blah,blah
if (!$conn) {
    echo "Unable to connect to DB: " . mysql_error();
    exit;
}
if (!mysqli_select_db($conn, "TRACK")) {
    echo "Unable to select mydbname: " . mysql_error();
    exit;
}

$result = $conn->query("SELECT VARIABLE FROM MEASTEST WHERE VARIABLE LIKE '$VARIABLE'
");

您必须设置具有标题功能的响应"内容类型"：

header("Content-Type: application/json")

并返回json:

echo json_encode(" your Response Data ")

您的AJAX请求没有发送任何参数：

var jsonData = $.ajax({
    type: "POST",
    url: "http://localhost/query/MEAS.php",
    dataType:"json",
    async: false
}).responseText;

您需要将参数添加到请求中：

var jsonData = $.ajax({
    type: "POST",
    url: "http://localhost/query/MEAS.php",
    data: {
        myParameterName: parameterValue
    },
    dataType:"json",
    async: false
}).responseText;

如果这是响应用户输入而发生的，那么绘制应该在事件处理程序中发生，以响应触发重绘的任何需要。例如：

function drawChart() {
    var jsonData = $.ajax({
        type: "POST",
        url: "http://localhost/query/MEAS.php",
        data: {
            myParameterName: 'default value'
        },
        dataType:"json",
        async: false
    }).responseText;
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);
    // create and draw the chart
    // ...
    /* assumes you have:
     *     a chart object called "chart"
     *     an options object called "options"
     *     a button with the id "myButton" that should trigger a redraw on click
     *     an input field "myInput" that has the value you want to send to your server
     */
    function updateChart () {
        jsonData = $.ajax({
            type: "POST",
            url: "http://localhost/query/MEAS.php",
            data: {
                myParameterName: document.querySelector('#myInput').value
            },
            dataType:"json",
            async: false
        }).responseText;
        data = new google.visualization.DataTable(jsonData);
        chart.draw(data, options);
    }
    var btn = document.querySelector('#myButton');
    if (document.addEventListener) {
        btn.addEventListener('click', updateChart);
    }
    else if (document.attachEvent) {
        btn.attachEvent('onclick', updateChart);
    }
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});