Question

我一直在寻找解决问题的方法，我找不到任何问题。

我想知道是否有人可以帮助我。

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

该图表设置为对另一个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>

Google Chart 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 QUERY（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页面。

由于

Answer 1

编辑：

您的代码不轻，您发送Ajax请求To＆＃34; MEAS.php＆＃34; ??

是＆＃34; MEAS.php＆＃34;＆＃39;代码??

如果＆＃34; MEAS.php＆＃34;是：

<?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'
");

您必须设置响应＆＃34;内容类型＆＃34;带标题功能：

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

并返回一个json：

echo json_encode(" your Response Data ")

Answer 2

您的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});

从html表单传递变量，谷歌图表ajax请求json数据

2 个答案: