从ajax调用中获得HTML或JSON响应，哪个更好?

I have a functionality in my project where I have implemented the search functionality.

我在我的项目中实现了搜索功能。

On submitting the form via ajax, I need to show all the results in a division.

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

There are two ways I can do this.

有两种方法。

Getting the JSON data as ajax response and bind it to the HTML elements.
获取JSON数据作为ajax响应并将其绑定到HTML元素。
I can also get the completely formatted HTML response from the ajax call and can directly bind it to the result div on the search page.
我还可以从ajax调用获得完全格式化的HTML响应，并可以直接将其绑定到搜索页面上的result div。

So which way is suggestible ?

那么，哪一种方式是可以暗示的呢?

5 个解决方案

#1

To make a service (server-side script) the most re-usable or even make it into an API - the suggested way is to return JSON data (converted from data models) to the front end, where using JavaScript you can populate the data to the HTML.

要使服务(服务器端脚本)最可重用，甚至使其成为API，建议的方法是将JSON数据(从数据模型转换为数据模型)返回到前端，在那里使用JavaScript可以将数据填充到HTML中。

As for the HTML - you can certainly make the server return the response as HTML (setting the correct mime & content type in headers) but this gives the server control over the UI layer and the separation between the interface and the server/db is not balanced properly...

对于HTML，您当然可以让服务器以HTML的形式返回响应(设置正确的mime和内容类型)，但是这使服务器控制了UI层，并且接口和服务器/db之间的分离没有得到适当的平衡……

#2

Either option is fine, depending on your how much html there is and how much server-side processing you need to do on the HTML. If it is just a div and a value that needs to be inserted, then I say just go with JSON. The JSON approach will be more lightweight (consumes less bandwidth and keeps the role of the server as an API that is transferable to non web-page requests).

这两个选项都可以，这取决于您有多少html以及需要在html上进行多少服务器端处理。如果只是一个div和一个需要插入的值，那么我选择JSON。JSON方法将更加轻量级(消耗更少的带宽，并将服务器的角色作为一种API来传递给非web页面请求)。

If you need to do a lot of server-side processing and assembling and what you are returning is really a sub-page, then you might consider html from the server. In this case have a partial html file that you read and send (inserting data where relevant) rather than building the html from strings on the fly. If you have a partial file, then you can edit and check it with standard html editors and you can see the html layout easily and it keeps the UI aspects separate from the business logic.

如果您需要做大量的服务器端处理和组装，您返回的内容实际上是一个子页面，那么您可以从服务器考虑html。在本例中，有一个读取和发送的部分html文件(在相关的地方插入数据)，而不是通过动态的字符串构建html。如果您有一个部分文件，那么您可以使用标准的html编辑器对其进行编辑和检查，您可以很容易地看到html布局，它将UI方面与业务逻辑分离开来。

#3

I'd send it as JSON and build the HTML client side for a few reasons:

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

The JSON payload would be lighter and therefore faster to send over the wire

JSON有效负载将更轻，因此通过网络发送更快
The API becomes more reusable (if you ever wanted to hook up additional clients that render differently etc.)

API变得更加可重用(如果您想要连接其他呈现方式不同的客户端，等等)。
If you build the HTML on the client side then it's probably easier to take advantage of templating libraries (e.g. JQuery Templates) or even better, directly binding the data to the UI (such as Knockout)

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

#4

I always do the JSON response. To me it looks like a much more consistent and flexible way since you can return more data than only presentation. If you still want to return HTML you can also do it through a JSON response:

我总是做JSON响应。在我看来，这是一种更加一致和灵活的方式，因为您可以返回比仅表示更多的数据。如果你还想返回HTML，你也可以通过JSON响应:

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

#5

I'd send it as a JSON response, too.

我也会把它作为一个JSON响应发送。

As suggested by emiolioicai in his code, with JSON you can easily handle errors. For example:
正如emiolioicai在他的代码中所建议的，使用JSON可以很容易地处理错误。例如:

        {
           error: true 
           error-message: wrong parameters
        }

If you define your HTML client side, in the future you will be able to use the same AJAX request and customize HTML differently in another part of your website.
如果您定义了HTML客户端，将来您将能够使用相同的AJAX请求，并在您的网站的另一部分中以不同的方式定制HTML。

#1

#2

#3