以正确的方式使用 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. 能够更改视图，如果是 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>

Answer 2

您的两个选项都正确，但我发现将逻辑和视图分开是一种很好的做法，这意味着在前端生成 html 视图很好。

现在，要生成包含多行的表格视图，您的响应数据应该正确结构化，例如 json 对象数组。

如果你得到我的解释，那么你可以关注这个帖子： Loop through a JSON array to create a Table

如有任何疑问，请告诉我