Question

我在页面上设置了一些jquery / php交互。它将一些数据提交给服务器并获取数据记录，然后在页面上对齐这些数据以进行比较，并在此之后采取可能的行动。

我的问题是返回信息然后显示信息的最佳做法是什么？

返回JSON对象，然后创建用js和显示器飞行的HTML 数据？
返回JSON对象然后将数据放入已创建的数据中页面上数据的容器？
从服务器返回纯HTML 把它放在页面上？

昨晚我在脑海里滚动着这些，并且无法确定一种方式是否因任何特殊原因更好。

我不是js guru，所以不确定这些不同方法的优点/缺点和注意事项。

Answer 1

我认为最终取决于您的应用。

纯HTML是最简单的，你只需要插入到中提琴中。 JQuery使得添加适当的事件变得轻而易举。

然而，每当我使用AJAX时，它总是演变为返回JSON并动态构建元素。例如，如果您正在填充树，那么获得正确的嵌套可能会变得很麻烦。这迫使你不得不做客户端代码，此时只需使用JSON从一开始就更清晰。

此外，如果您计划使用来自其他页面的数据调用，那么使用JSON是可行的方法，因为HTML将被修复。

Answer 2

这完全取决于您在应用程序中设置内容的方式。我，更喜欢返回JSON（列表中的第二种方法），因为我有一个'错误代码'参数，我在更新页面上的内容之前检查onSuccess函数，如果它不为零，那么我通知用户错误，包括从服务器返回的错误消息（服务器端验证，数据库超时等）。

Answer 3

你问题中“可能采取的行动”部分会产生很大的不同。如果除了显示数据之外还需要对数据执行其他操作，那么返回JSON显然是更好的选择，因为您可以将数据作为本机JavaScript对象使用，而不必遍历HTML DOM。如果您打算做的只是显示它，我认为没有任何理由可以解决在JavaScript中构建该显示的麻烦;只需在服务器上的表示层中构建HTML。

Answer 4

我认为你错过了一个完全有效的选项，我经常使用它。这是我的典型架构，它还没有让我失望......： - ）

这是我使用的基本jQuery模板：

$(function() {
    $.getJSON('/some/page',{foo:bar,bar:foo},function(json) {
        if(json.outcome == 'success') {
            $('body').prepend(json.html);
        } else {
            // Somehow let the user know why it didn't work
            alert(json.error);
        }
    });
});

这是我使用的基本后端（在我的情况下为PHP）结构：

<?php // Page: '/some/page'

/* Blah Blah Blah... do whatever needs to be done... */

// If everything turns out okay (assuming '$output' is the HTML 
// you want to display...
echo json_encode(array('outcome'=>'success','html'=>$output));

// If something goes wrong... just do:
echo json_encode(array('outcome'=>'error','error'=>'Uh oh... something is broken'));

当然，您希望通过将它们放入某个变量或其他内容来更具体地解决您的错误。但是，你应该明白这个想法。此外，您当然可以向json输出添加更多信息。你可以有一些预先制作的HTML以及一些其他信息，如“成功通知”或某个元素的新类名，我不知道......无论如何......可能性是无穷无尽的。

无论如何，我选择这条路线的原因是因为它通常更快（根据我的经验）将预先制作的HTML附加到DOM而不是循环JSON并插入内容，除非它只是一些文本替换为元素。但是，我所展示的方法是，IMO，两全其美。您可以将HTML作为字符串附加到其中一个JSON属性。

快乐jQuerying： - ）

Answer 5

最近出现了这种情况，可能是一种欺骗：The AJAX response: Data (JSON, XML) or HTML snippet?。

如果您要创建HTML，那么您也可以直接返回HTML并将其注入DOM。但是，有时您需要使用JSON派上用场的对象。

如果你返回一个Person对象，那么你可以问候Person.Name并显示真正方便的Person.Preferences。这取决于您的设计，但一般需要考虑将HTML保留在Javascript之外，除非您正在构建RIA。

Answer 6

我已经使用了所有三个并得出结论，在向页面引入新元素时返回HTML会更好。

我的经验是，当使用javascript构建HTML时，我通常会复制已经为非JavaScript用户旅程完成的工作。

我仍然更喜欢解析json来更新现有元素或仅创建javascript功能。我告诉自己这个带宽，但我认为这只是因为我喜欢javascript。

作为第四个选项，我读了一篇很棒的帖子，讲述了Flickr如何使用字符串连接处理大量数据。基本上只是在管道上解析一个大的字符串并将其切断在客户端上。这大大减少了服务器上的数量，客户端只有轻微的增长。

Answer 7

返回纯HTML是最佳解决方案。在大多数情况下，gzip应该中和带宽的任何差异，如果客户端是一个糟糕的机器，通过客户端上的javascript渲染可能会很慢。最后，如果你使用MVC，那么编写javascript来呈现HTML与使用像视图这样的东西相比是很难的。

从AJAX调用返回和显示数据的最佳实践

7 个答案: