php - 以正确的方式使用 AJAX JSON PHP 在表中显示数据

Question

我正在制作一个管理面板。所以我想在页面加载时在表中显示数据库中的数据。我很困惑，我从后端端在 div 中显示整个表还是只放数据？？

例如:

success:function(response){
    $("#result").html(result);
}

这将在结果 div 中显示整个表格。这将来自后端。

或

 success:function(response){
        $("#result").html('<table><tr><td>'+response.name+'</td><td>'+response.password+'</td></tr>');
    }

如果这是在表格中打印数据的方式，那么它将一次只打印行。每个中的数据都不是完整的。

请帮我解决这个问题。

Answer 1

从后端获取数据作为 JSON 输出并使用来自响应的 JSON 在客户端构建表显然会更好。主要原因是:

1. 客户端和服务器之间的代码占用空间较小。
2. 能够更改 View ，如果是 JSON，则它与 HTML 无关。

将来，如果你想改变结构或者如果你需要在不同的页面中以不同的方式使用相同的输出，你不需要改变底层的 PHP，相反，你可以只改变渲染机制。

让服务器发出这样的 JSON 输出:

[{
  "name": "Praveen",
  "age": 27
}, {
  "name": "Kumar",
  "age": 25
}]

让 JavaScript 完成剩下的工作。

var jsonResponse = [{
  "name": "Praveen",
  "age": 27
}, {
  "name": "Kumar",
  "age": 25
}];
$('body').append(function () {
  var table = $('<table />');
  var headr = $('<tr />');
  headr.append('<th>Name</th>');
  headr.append('<th>Age</th>');
  headr.appendTo(table);
  $.each(jsonResponse, function (i, v) {
    var tr = $('<tr />');
    tr.append('<td>' + v.name + '</td>');
    tr.append('<td>' + v.age + '</td>');
    tr.appendTo(table);
  });
  return table;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>