Question

我已经搜索并尝试了几个小时但没有成功。

我有一个现有页面，它在HTML表格中使用PHP显示来自数据库的简单数据。现在我想实现AJAX功能，以便在没有页面刷新的情况下刷新数据。

我已经实现了this solution，据我所知，AJAX调用部分正在运行，值正在按预期刷新。但是我不知道如何获得价值。

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（用于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);
?>

如果我直接在浏览器中运行query.php，我会看到这种格式的所有数据：[{"LastUpdated":"20170614","symbol":"AUD","sum":"20"},{"LastUpdated":"20170614","symbol":"AUD","sum":"10"}]

但在我的主页上，我在表格中看到undefined。理想情况下，我希望拥有所有值（在上面的代码中使用JS循环）来显示从DB获取的所有记录（变量编号的记录）。

HINT /修改
当我改变时：
$('#output').html("<tr><td>"+data["symbol"]+"</td></tr>");
到
$('#output').html("<tr><td>"+data[0]+"</td></tr>");
在index.php中

AND

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

中，我只得到第一行作为20170614,AUD,40之类的字符串。
结束提示/修改

如果这是一个愚蠢的问题，我很抱歉。我是jQuery的新手并且第一次尝试使用AJAX。

P.S。我知道 mysql_ *函数已被弃用，我知道这个漏洞。

非常感谢您的帮助。

Answer 1

更新数据表时，您可能只想重建表格。在回调函数中，您需要循环遍历数组并向表中添加新行。

$.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

您必须按照以下说明更改代码。

来自

data["symbol"]

到

data.symbol

如果不起作用，请告诉我。

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

2 个答案: