Question

我正试图在JSON的帮助下从MYSQL数据库中获取一个javascript对象，我称之为'items'。稍后我会使用这个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>

Answer 1

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

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

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

Answer 2

尝试将此代码添加到index.html，您需要将代码包装在DOM准备就绪时执行。一种方法是在$（document）.ready（function（）{//你的代码在这里}）内包装;

<!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>

使用JSON获取Javascript对象

2 个答案: