从ajax调用获取HTML或JSON响应，哪个好？

Question

我的项目中有一项功能，我已经实现了搜索功能。

在通过ajax提交表单时，我需要在一个部门中显示所有结果。

我有两种方法可以做到这一点。

1. 将JSON数据作为ajax响应获取并将其绑定到HTML元素。
2. 我也可以从ajax调用中获取完全格式化的HTML响应，并可以直接将其绑定到搜索页面上的结果div。

那么哪种方式可以暗示？

Answer 1

使服务（服务器端脚本）最可重用或甚至将其变为API - 建议的方法是将JSON数据（从数据模型转换）返回到前端，使用JavaScript，您可以将数据填充到HTML。

对于HTML - 你当然可以让服务器以HTML的形式返回响应（在标题中设置正确的mime＆amp;内容类型），但这可以让服务器控制UI层和接口和服务器/ db之间的分离不正确......

Answer 2

任何一个选项都可以，具体取决于你需要多少HTML以及你需要对HTML进行多少服务器端处理。如果它只是一个div和一个需要插入的值，那么我说只需要使用JSON。 JSON方法将更加轻量级（消耗更少的带宽并将服务器的角色保持为可转换为非Web页面请求的API）。

如果您需要进行大量的服务器端处理和组装，并且您返回的内容实际上是一个子页面，那么您可以考虑从服务器获取html。在这种情况下，您有一个部分html文件，您可以读取和发送（在相关时插入数据），而不是动态地从字符串构建html。如果您有一个部分文件，那么您可以使用标准的html编辑器进行编辑和检查，您可以轻松地查看html布局，并使UI方面与业务逻辑分开。

Answer 3

我将其作为JSON发送并构建HTML客户端，原因如下：

• JSON有效负载会更轻，因此通过线路发送速度更快

• API变得更具可重用性（如果您想连接其他呈现不同的客户端等）。

• 如果你在客户端构建HTML，那么可能更容易利用模板库（例如JQuery模板）甚至更好，直接将数据绑定到UI（例如Knockout）

Answer 4

我总是做JSON响应。对我来说，它看起来更加一致和灵活，因为您可以返回更多数据而不仅仅是演示文稿。如果您仍想返回HTML，您也可以通过JSON响应来执行此操作：

{
   error: false
   html: "<div>Done!</div>"
}

Answer 5

我也将它作为JSON响应发送。

1. 正如emiolioicai在他的代码中所建议的，使用JSON，您可以轻松处理错误。例如：

        {
           error: true 
           error-message: wrong parameters
        }

1. 如果您定义了HTML客户端，将来您将能够使用相同的AJAX请求，并在网站的其他部分以不同方式自定义HTML。