Question

我将从问题开始：我有一个查询MySql数据库的php文件，我希望将结果存放在javascript数组中，以便我可以绘制它（使用jQuery的flot）。有人知道怎么做吗？

到目前为止，我所做的工作是：

我有一个非常好的jQuery-flot代码，它绘制了一个图表。请注意，此代码中此问题最重要的变量是“data1”。
AJAX（带有php文件），用于打印mysql数据库中的数据

我想放入“data1”变量（在jquery-flot代码中），来自数据库的数据（时间和数据）但我找不到一种方法来“连接”php文件的结果与data1变量。

jQuery-flot图表绘制代码（请注意'data1'变量）：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>Flot Example</title>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.selection.js"></script>
</head>
<body>
    <h1>Flot Examples</h1>s
    <div id="placeholder" style="width:600px;height:300px"></div>
    <div id="overview" style="width:160px;height:100px"></div>
    <script type="text/javascript">
     /*Show Tooltip*/
     function showTooltip(x, y, contents) {
     $('<div id="tooltip">' + contents + '</div>').css({
         position: 'absolute',
         display: 'none',
         top: y + 5,
         left: x + 5,
         border: '1px solid #fdd',
         padding: '2px',
         'background-color': '#fee',
         opacity: 0.80
     }).appendTo("body").fadeIn(200);
 }

 //End of Tooltip    
 var data, data1, options, optionsOverview, chart, overview;
 var data2 = [],
 data3 = [];
 data1 = [
     [1, 4],
     [2, 5],
     [3, 6],
     [4, 9],
     [5, 7],
     [6, 6],
     [7, 2],
     [8, 1],
     [9, 3]
 ];

 for (var i = 1; i < 10; i++) {
     data2.push([i, i * 2])
 }

 for (var i = 1; i < 10; i++) {
     data3.push([i, 10 * Math.random()])
 }

 data = [{
     data: data1,
     label: "fixed",
     lines: {
         show: true
     }
 }, {
     data: data2,
     label: "linear",
     lines: {
         show: true
     },
     points: {
         show: true
     }
 }, {
     data: data3,
     label: "random",
     bars: {
         show: true,
         barWidth: 0.5
     }
 }];

 options = {
     legend: {
         position: "nw"
     },
     grid: {
         clickable: true,
         hoverable: true
     }
 };

 //SELECTION 
 optionsOverview = {
     legend: {
         show: false
     },
     selection: {
         mode: "xy"
     }
 };

 $(document).ready(function () {
     chart = $.plot($("#placeholder"), data, options);
     //SELECTION 
     overview = $.plot($("#overview"), data, optionsOverview);
 });

 /*SELECTION*/
 $("#overview").bind("plotselected", function (event, ranges) {
     chart.setSelection(ranges);
 });

 $("#placeholder").bind("plotselected", function (event, ranges) {
 if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
     ranges.xaxis.to = ranges.xaxis.from + 0.00001;
 }
 if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
     ranges.yaxis.to = ranges.yaxis.from + 0.00001;
 }
 plot = $.plot("#placeholder", data,
     $.extend(true, {}, options, {
         xaxis: {
             min: ranges.xaxis.from,
             max: ranges.xaxis.to
         },
         yaxis: {
             min: ranges.yaxis.from,
             max: ranges.yaxis.to
         }
     })
 );
 overview.setSelection(ranges, true);

 });
 //End of Selection
 /*Show Tooltip*/

 $("#placeholder").bind("plothover", function (event, pos, item) {
     $("#tooltip").remove();
     if (item) {
         var x = item.datapoint[0].toFixed(2),
         y = item.datapoint[1].toFixed(2);
        showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " - " + y);
     }
 });
//End of Tooltip
</script>
    <br /><br /><br />

</body>
</html>

我有一个MySQL DB：

mysql> select * from example5;
+------+------+
| time | data |
+------+------+
|    1 |    1 |
|    1 |    2 |
|    2 |    3 |
|    3 |    6 |
|    4 |    9 |
|    5 |   10 |
|    6 |   15 |
|    7 |   20 |
+------+------+
8 rows in set (0.00 sec)

：的index.html：

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "getdata.php?q=" + str, true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select Time:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="4">7</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

和getdata.php：

<?php
$q=$_GET["q"];


$con = mysqli_connect('localhost','root','12345678','test');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"test");
$sql="SELECT * FROM example5 WHERE time = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Time</th>
<th>Data</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['time'] . "</td>";
  echo "<td>" . $row['data'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?>

感谢您的帮助，诺姆

Answer 1

在PHP和Javascript之间进行通信的一种简单方法是JSON。 PHP可以很容易地用JSON编码/解码数组，JS也可以用对象做同样的事情。您可以尝试以下方法：

在PHP脚本中，返回包含数据的JSON数组：

<?php
    $q=$_GET["q"];
    $con = mysqli_connect('localhost','root','12345678','test');
    if (!$con)
    {
        die('Could not connect: ' . mysqli_error($con));
    }

    mysqli_select_db($con,"test");
    $sql="SELECT * FROM example5 WHERE time = '".$q."'";

    $result = mysqli_query($con,$sql);

    $returnArray = array();
    while($row = mysqli_fetch_array($result))
    {
         $returnArray[] = array($row['time'], $row['data']);
    }
    echo json_encode($returnArray);
    mysqli_close($con);
?>

在你的Javascript中，像这样创建一个AJAX调用（我正在使用JQuery）：

function retrieveResults(str){
jQuery.ajax({
        type: 'GET',
        url: "getdata.php",
        data: {
            q: str,
        }, 
        success: function(data, textStatus, jqXHR) {
            var json = $.parseJSON(data);
                $.each(json, function(index, value) {
                    data1.push(value); // Not sure if it is correct, you might need to do some changes, but this is for the global idea 
                }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log('An error occurred:'+errorThrown);
        }
    });
}

Answer 2

通过查看它是否试图从您的数据库输出这段javascript？ data1 = [[1,4]，[2,5]，[3,6]，[4,9]，[5,7]，[6,6]，[7,2]，[8,1] ，[9,3]];

只要您的代码位于.php页面，就可以回显javascript行。

<?php echo 'data1 = ['.while($row = mysqli_fetch_array($result)){echo '['$row['time'].",".$row['data'].'],';}.'];'

这是在您连接到数据库之后，类似于getdata.php

如何将数据从php文件导入到javascript变量

2 个答案: