如何将ajax请求返回的Json格式数据循环输出成table形式

Posted 2023-04-08

参考技术A 首先，Ajax请求数据，（用的是Jquery的Ajax）

复制代码 代码如下:

<script>
$(function()
$('#test').click(function()
$.ajax(
url:'__APP__/Article/jsonTest',
type:'post',
success:function(data)
var item;
$.each(data,function(i,result)
item
=
"<tr><td>"+result['num']+"</td><td>"+result['title']+"<
/td><td>"+result['credate']+"</td><td>操作<
/td></tr>";
$('.table').append(item);
);

)
)
);
</script>

后台处理请求，返回Json格式数据（用的是Thinkphp返回）

复制代码 代码如下:

$list = $File->group('num')->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select();
$this->ajaxReturn($list,'JSON');

html部分

复制代码 代码如下:

<table class="table table-striped table-bordered table-condensed">
<tr><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th></tr>
</table>

如何：正确使用PHP将数据编码成JSON格式，并通过jquery/ajax请求数据

【中文标题】如何：正确使用PHP将数据编码成JSON格式，并通过jquery/ajax请求数据

【英文标题】：How to: Properly use PHP to encode data into JSON format, and request the data with jquery/ajax

【发布时间】：2014-02-24 20:19:09

【问题描述】：

我正在尝试创建一个地址簿。

我可以成功连接到数据库并使用 php 脚本插入数据。

我什至设法显示我的表格行的 json 编码数据，但我不知道我是否做得对。

我真正想要实现的目标：

我希望能够对 say 和 ID 发出 ajax 请求，然后取回该 ID 的所有相应数据（包装在 Json 中 - 至少我认为它需要......）。 使用 ajax 脚本，我希望能够将返回的相应数据保存到 html 文件中的输入字段中。

我也想知道如果尝试将 HTML 返回到 ajax 调用并以这种方式将数据输入到 html 输入字段中会更好吗？

到目前为止，我的成功有限，但这是我目前所拥有的......

我有一个数据库连接脚本：

$host = "localhost";
$user = "user";
$pass = "pass";
$db = "data_base";

$mysqli = new mysqli($host, $user, $pass, $db);

if($mysqli->connect_error) 
 die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error());

return $mysqli;

具有以下列的 mysql ISAM DB：

    id, user, pass, nickname, address, facebook, twitter, linkedin, youtube
    ID should be unique
    User is an index
    Pass is an index
    nickname is an index
    address is primary - though its possible that id should be...
    Facebook, Twitter, Linkedin, and Youtube are all indexes. 

注意：如果有人认为合适，我很乐意更改索引、主要等...

已编辑！**现在我的查询页面：

error_reporting(E_ALL); ini_set("display_errors", 1);
include 'db/dbcon.php';
//Start connection with SQL
$q = "SELECT * FROM `cfaddrbook` WHERE key = '111111'";
$res = $mysqli->query($q) or trigger_error($mysqli->error."[$q]");
$array = array(); // initialize
while($row = $res->fetch_array(MYSQLI_BOTH)) 
$array[] = array(
'key' => $row[0],
'username' => $row[1],
// ... continue like this
);

header('Content-Type: application/json');
echo json_encode($array);
$res->free();
$mysqli->close();

现在，上面的脚本似乎工作正常。至少在浏览器中加载 php 页面时它显示得很好。

但是当我使用这个脚本进行 ajax 调用时：

$(document).ready(function() 
$.ajax(
        type: "POST",
        url: "queries.php",
        dataType: 'json',
        data: "",
        cache: false,
        success: function(result)
            
                var cfkey = result[0];
                var user = result[1];
                alert("cfkey:" + cfkey + "user:" + user);
            
    );
);

加载此代码后，chrome 控制台显示服务器返回错误 500。

再说一遍，我要完成的工作：

我希望能够对 say 和 ID 发出 ajax 请求，然后取回该 ID 的所有相应数据（包装在 Json 中 - 至少我认为它需要......）。 通过ajax脚本，我希望能够将返回的对应数据保存到html中的输入字段中。

编辑： 最后发现我和 Majid 讨论的问题是 SQL 查询。 需要的键需要用`字符包裹。

【问题讨论】：

您在连接脚本中缺少"，在$pass 之后。

当我拿出我的真实密码将代码粘贴到这里时，这是一个拼写错误。我服务器上的实际代码实际上有 $pass = "password";在 php 代码中正确说明。不过谢谢！

【参考方案1】：

我相信您希望 query.php 返回 json（到您的 ajax），因此您需要在您的 queries.php 中使用内容标头类型！

header('Content-Type: application/json');

【讨论】：

我在“include”行下添加了它，控制台再次返回500错误（对于ajax查询）。我是不是加错地方了？

你应该把它放在包含之前。在header 的PHP 手册中，它说： 请记住，必须在发送任何实际输出之前调用header()，无论是通过普通HTML 标记、文件中的空白行还是从PHP 发送。使用 include 或 require 函数或其他文件访问函数读取代码并在调用 header() 之前输出空格或空行是一个非常常见的错误。使用单个 PHP/HTML 文件时也存在同样的问题。

它现在位于包含行的上方。仍然没有区别。

【参考方案2】：

您需要更多有用的错误消息。尝试在代码开头添加以下行。

error_reporting(E_ALL); ini_set("display_errors", 1);

【讨论】：

添加了这个，现在它只是给出了一堆导致脚本中断的 php 错误。

【参考方案3】：

您输出 JSON 的脚本正在编写多个有效的 JSON 字符串（每个数据库行一个），但它们不会加起来形成有效的 JSON 文件。一个 JSON 文件应该代表一个 JSON 对象。

如果您想传递一个 ID 并返回一个数据库行，您必须将该 ID 添加到 AJAX 调用的 data 部分，并修改 query.php 以将该 ID 从其 $_POST 数组传递到MySQL 查询的 WHERE 部分。然后，您将只输出一个 JSON 编码的对象而不是许多，这将是一个有效的 JSON 文件。

（或者，如果您想恢复整个表，您可以json_encode() 整个$rows 数组而不是单独的每个$row。）

另外，如果您在 PHP 中json_encode() 一个字符串索引数组，那么您在 Javascript 中按名称而不是按索引读取它的属性。您已经经历了在 PHP 中命名键的麻烦，然后切换回尝试通过它们在 Javascript 中的基于 0 的索引来引用它们。您可以选择一种方式或其他方式，但您只能选择一种方式！

【讨论】：

您的回复几乎就是我想要完成的。请您详细说明第 1 段、第 2 段和第 3 段吗？

所以，全部...如果你将data 设置为 id : 1 ，那么在PHP 中$_POST['id'] 将是1。不过现在，只需将 MySQL 查询硬编码为 SELECT * FROM cfaddrbook WHERE id = 1（尽管选择一个现有的 id 号），您就会看到您得到了有效的 JSON。在您的成功处理程序中，将result[0] 更改为result.id 并将result[1] 更改为result.username，它应该按照您想要的方式工作。您应该能够通过更多的实验从那里弄清楚。祝你好运！

在添加 WHERE id = 1 行后，在我的情况下，WHERE key = 111111，它会吐出很多错误。如果我采取这种方式，显示 php 页面时不会再出现错误。

另外，在 URL 后添加 &username 仍然会显示所有 JSON 数据，而不是与其对应的特定数据。所以我想知道当数据被传递回ajax查询时，它是否找不到它的请求？

【参考方案4】：

在您执行查询并且结果集在 $res 中可用后，您可以构建您的数组，无需单独的 foreach：

$array = array(); // initialize
while($row = $res->fetch_array(MYSQLI_BOTH)) 
  $array[] = array(
    'id'       => $row[0],
    'username' => $row[1],
    'password' => $row[2],
    'nick'     => $row[3],
    'addr'     => $row[4],
    'facebook' => $row[5],
    'twitter'  => $row[6],
    'linkedin' => $row[7],
    'youtube'  => $row[8]
  );

header('Content-Type: application/json');
echo json_encode($array);

另请注意，这样，您的 json 将有密钥，因此要使用它，您应该更改：

success: function(result) 
  var cfkey = result[0];
  var user = result[1];
  alert("cfkey:" + cfkey + "user:" + user);

到

success: function(result) 
  var cfkey = result.id;
  var user = result.username;
  alert("cfkey:" + cfkey + "user:" + user);

或者干脆做

$.getJSON('queries.php', cfkey: $("#cfkey").val(), function(result) 
  // we have multiple results
  $.each(result, function(i,r) 
    console.log("cfkey:" + r.key + "user:" + r.username);
  );
);

编辑：@amurrell 指出的添加标题

【讨论】：

很棒的建议！但是，输入代码后，php给了我：

编辑过多！对不起。这表明我该睡觉了！

"PHP 解析错误：语法错误，意外的 ',' in /file/... 第 8 行

@user3259138，是的，我的代码有错误，最后一次编辑应该可以正常工作；）

代码：包括'db/dbcon.php'； //用SQL开始连接 $q = "SELECT * FROM cfaddrbook"; $res = $mysqli->query($q) 或 trigger_error($mysqli->error."[$sql]"); $数组 = 数组（）； // 初始化 while($row = $res->fetch_array(MYSQLI_BOTH)) $array[]['id'] = $row[0], $array[]['username'] = $row[1], // ... 像这样继续 echo json_encode($array); $结果->免费（）； $mysqli->close();