AJAX/jQuery - 填充 HTML 替代方法

Question

我正在研究使用 AJAX/jQuery 从 PHP 脚本加载数据的替代方法，但在 A) 足够完善我的问题或 B) 查找任何文档时遇到了问题。

目前，我使用带有 ajax 的常规 post 类：

$.ajax({
  url: 'script.php',
  data: {
          data1: $('#input1').val(),
          data2: $('#input2').val()
        },
  dataType: 'json',
  success: function(data){
             $.each(data, function (key, value){
               $('#data-cont').append(value);
             });
           }
 })

script.php 返回 json 数据的位置。

现在，我有 $('#data-cont').append(value); 的地方通常是一个巨大的混乱，我尝试在 HTML 标记旁边插入响应数据。它超级丑陋，整理和构建真的很痛苦。

在做研究时，我见过dataType: 'html'，它通过元素 ID 解析 html 中的数据。就个人而言，我认为使用 PHP 生成 HTML 比使用 jquery/javascript 更容易和更简洁。在 PHP 中，您可以使用带有 if 语句等的替代语法，生成更简洁的代码和标记，更易于组织和开发。

所以，对于我的实际问题。

用于将数据编译成 HTML 标记，这是标准/更首选的脚本响应、HTML 或 JSON 在 jQuery/js 中构建标记？

Answer 1

老实说，这取决于您需要对该响应在客户端做什么。

如果它只是需要显示的东西，请继续生成html服务器端并将其添加到您认为合适的dom中。

如果您需要根据该数据在客户端做出决策，那么您何时想要返回 json。

举一个非常简单的例子，你有一个返回的 json 结构，其中包含来自数据库的客户列表，并且这个 json 还包括每个客户的主键和电话号码。现在您可以创建一个包含该 json 数据的对象，处理构建一个显示列表，并将 onclick 方法绑定到每个列表项。现在，当用户单击列表项时，您可以简单地返回该列表项的索引，该索引将对应于您的 json 数据结构中的相同索引，现在不必解析 html 属性以获取有关该列表项的更多数据/client，您可以直接访问您的 json 数据结构，而无需其他服务器请求或混乱的 javascript。您可以在 onclick 中将客户端主键添加到另一个数组，该数组将存储应该联系的人等。然后您可以提供一个提交按钮，该按钮会将主键传递回服务器，以便为用户执行某些服务的逻辑（使这样您就不必通过名字和姓氏来解析客户）。

这真的是关于手头的任务，而不是“正确”或“最佳”的方法。

但值得一提的是，为什么要在服务器端做，客户端可以做些什么呢？您可以通过简化通信来节省资源。 JSON 非常轻量级。

另外一点，对于 SEO，您几乎应该始终构建所有 HTML 服务器端。