0

我正在尝试在 JSON 的帮助下从 MYSQL DB 获取一个我称之为“项目”的 javascript 对象。稍后我将使用这个 javascript 对象来绘制图表。现在我只想在“body”部分打印变量“items”。（如代码中所示）。

我在网上找到了一些建议的答案：retrieveResults() 和retrieveResults2()，但它们都不起作用，我将不胜感激。

现在我根本没有从'document.write（items）'得到任何输出，我不知道这是什么原因。

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

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

index.html 文件：

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

<html>
<head>
    <script language="javascript">
        var items =[];

        function run(){
            $.getJSON('getdata.php', function(data) {


                $.each(data, function(key, val) {
                    items.push('<li id="' + key + '">' + val + '</li>');
                });

                $('<ul/>', {
                    'class': 'my-new-list',
                    html: items.join('')
                }).appendTo('body');
            });
        }

        function retrieveResults2(str){
            $.ajax({
                dataType: "json",
                url: "getdata.php",
                data: data,
                success: run
            });
        }

        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) {
                    items.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);
                }
            });
        }

        window.onload = retrieveResults2(1);

    </script>
</head>
<body>
    <form>
        <select name="users">
        <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>
    <script type="text/javascript">
        document.write(items);


    </script>

</body>
</html>
4

2 回答 2

0

在您调用 时document.write()，items是一个空数组（因为尚未接收和处理对基于 Ajax 的 HTTP 请求的 HTTP 响应）。

您需要在 Ajax 回调中修改您的文档（并且您需要使用 DOM 进行修改，而不是document.write因为document.write会破坏现有文档）。

此外，您永远不会在传递值的地方发出 ajax 请求q，因此您的 SQL 查询可能会引发错误并使脚本死亡，而不是为您提供有用的响应。

于 2013-08-14T09:20:26.940 回答
0

尝试将此代码添加到 index.html，您需要包装代码以在 DOM 准备好时执行。一种方法是包装在 $(document).ready(function() { //your code here });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function() {
        var items =[];

        $.getJSON('getdata.php', function(data) {
            $.each(data, function(key, val) {
                items.push('<li id="' + key + '">' + val + '</li>');
            });

            $('<ul/>', { class: 'my-new-list', html: items.join('')}).appendTo('body');
        });
    });
    </script>
</head>
<body>
<form>
    <select name="users">
        <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>
</body>
</html>
于 2013-08-14T09:24:14.607 回答