无法通过jQuery访问AJAX响应数据

Question

I have searched and tried for hours but unsuccessful. 我已经搜索并尝试了几个小时，但未成功。

I have an existing page which displays simple data from DB using PHP in an HTML table. 我有一个现有页面，该页面在HTML表中显示使用PHP的数据库中的简单数据。 Now I want to implement AJAX functionality so that data is refreshed without page refresh. 现在，我要实现AJAX功能，以便无需刷新页面即可刷新数据。

I have implemented this solution , to my understanding, the AJAX call part is working and the values are getting refreshed as expected. 我已经实现了此解决方案，据我了解，AJAX调用部分正在运行，并且值已按预期刷新。 but I am stuck in getting the values. 但我一直坚持获取价值。

index.php (main page) index.php（主页）

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
</head>
<body>
<h3>Output: </h3>

<table border="1" id="output"></table>

<script id="source" language="javascript" type="text/javascript">
$(function() {
    update_content();
});

    function update_content() 
    {
    $.ajax({                                      
      url: 'query.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to query.php
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        if(data){       
       (data + '').length;
    }
    var temp = new Array();
        $('#output').html("<tr><td>"+data["symbol"]+"</td></tr>");
      } 
    });
    setTimeout(function(){
            update_content();
        }, 1000);
    }
</script>
</body>
</html>

query.php (used for AJAX call) query.php（用于AJAX调用）

<?php 
include('inc/connection.php');

# Main query
$sql = "
select LastUpdated, symbol, sum
from TheTable
";

$result = mysql_query($sql);

while($row = mysql_fetch_row($result)){
$table_data[]=array("LastUpdated"=>$row[0],"symbol"=>$row[1],"sum"=>$row[2]);
}
echo json_encode($table_data);
?>

If I run query.php directly in the browser, I see all the data in this format: [{"LastUpdated":"20170614","symbol":"AUD","sum":"20"},{"LastUpdated":"20170614","symbol":"AUD","sum":"10"}] 如果我直接在浏览器中运行query.php，则会看到此格式的所有数据： [{"LastUpdated":"20170614","symbol":"AUD","sum":"20"},{"LastUpdated":"20170614","symbol":"AUD","sum":"10"}]

But on my main page, I see undefined inside the table. 但是在我的主页上，我看到表内undefined 。 I'd ideally like to have all the values (using a JS loop in the above code may be) to display all the records fetched from DB (variable no. of records). 理想情况下，我希望具有所有值（可以在上面的代码中使用JS循环）来显示从DB提取的所有记录（可变记录数）。

HINT/MODIFICATION 提示/修改
When I change: 当我改变时：
$('#output').html("<tr><td>"+data["symbol"]+"</td></tr>");
to 至
$('#output').html("<tr><td>"+data[0]+"</td></tr>");
in index.php 在index.php中

AND 和

$table_data[]=array("LastUpdated"=>$row[0],"symbol"=>$row[1],"sum"=>$row[2]);
to 至
$table_data[]=$row;
in query.php, 在query.php中，

then I get only first row as a string like 20170614,AUD,40 . 然后我只获得第一行作为字符串，如20170614,AUD,40 。
END HINT/MODIFICATION 结束提示/修改

I am sorry if that's a silly question/problem. 很抱歉，这是一个愚蠢的问题。 I am new to jQuery and trying AJAX for first time. 我是jQuery的新手，也是第一次尝试AJAX。

PS I know mysql_* functions are deprecated and I am aware of the vulnerability. PS我知道mysql_ *函数已被弃用，并且我知道该漏洞。

Your help would be highly appreciated. 您的帮助将不胜感激。

Answer 1

When you update your data table you'll probably want to just rebuild the table. 更新数据表时，您可能只想重建表。 In your callback function, you need to loop through the array and add new rows to the table. 在回调函数中，您需要遍历数组并将新行添加到表中。

$.ajax({
  url: 'query.php', //the script to call to get data          
  dataType: 'json', //data format      
  success: function(data) {
      if (!Array.isArray(data) || !data.length) {
          return;
      }

      $("#output").empty(); //clear old table data
      for(var i = 0, len = data.length; i < len; i++) {

        $("#output").append(
          "<tr><td>" + data[i].LastUpdated + "</td>" + 
          "<td>" + data[i].symbol + "</td></tr>" +
          "<td>" + data[i].sum + "</td></tr>"
        );
      }
    }
});

Answer 2

You have to change code as mentioned below. 您必须按如下所述更改代码。

From 从

data["symbol"]

to 至

data.symbol

Let me know if it not works. 让我知道是否有效。

无法通过jQuery访问AJAX响应数据

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-06-14 07:02:49

解决方案2
0 2017-06-14 07:00:15

无法通过jQuery访问AJAX响应数据

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-06-14 07:02:49

解决方案2 0 2017-06-14 07:00:15

解决方案1
2 已采纳 2017-06-14 07:02:49

解决方案2
0 2017-06-14 07:00:15