从AJAX调用中返回并显示数据的最佳做法

我在页面上设置了一些jQuery/php交互。它向服务器提交一些数据，然后获取要在页面上对齐的数据记录，以便进行比较和超出该数据的可能操作。从AJAX调用中返回并显示数据的最佳做法

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

返回JSON对象，然后动态创建 HTML与JS和显示的数据？
返回JSON对象，然后将该数据放入已创建的容器中作为页面上的数据？
从服务器返回纯html和只是把它放在页面上？

我昨天晚上在滚动这些东西，并且无法确定某种方式是否会因为任何特定原因而更好。

我不是一个js大师，所以不太确定这些不同方法的优缺点和注意事项。

来源

2009-05-20 Nathan Hess

我认为它取决于您的应用程序。

纯粹的HTML是最简单的，你只是放在适当的位置和中提琴。 JQuery使添加正确事件变得轻而易举，而不是。

但是，每当我使用AJAX时，它总是演变为返回JSON并动态构建元素。例如，如果您正在填充一棵树，则可能会变得混乱以获得正确的嵌套。这迫使你不得不做任何客户端代码，在这一点上，从一开始就简单地使用JSON是更清洁的。另外，如果您打算使用来自其他页面的数据调用，那么使用JSON是一种方法，因为HTML将被固定。

来源

2009-05-20 20:27:13

-1

返回纯HTML是最好的解决方案。大多数情况下，gzip应该消除带宽的任何差异，如果客户端是糟糕的机器，则通过客户端上的javascript呈现速度可能会变慢。最后，如果使用MVC，相比于使用像视图一样好的东西，编写javascript来呈现HTML很难。

来源

2009-05-20 20:19:40 RedFilter

这远不是'最好的'，因为混合了数据和表示。很多更清洁的是在HTML中使用模板，并使用数据填充它们 – Javier 2009-05-20 20:28:50

咦？没有什么是混合的，它通过我的方法通过MVC干净地分离服务器端。 – RedFilter 2009-05-20 20:42:46

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

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

如果你返回一个Person对象，例如你可以问候Person.Name并显示Person.Preferences，这真的很方便。这取决于你的设计，但一般的考虑因素应该是保持HTML超出Javascript，除非你正在构建RIA。

来源

2009-05-20 20:27:28 aleemb

你刚刚在你的回答中包含了这个问题的链接吗？ – montrealist 2009-05-20 20:29:49

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

来源

2009-05-20 20:32:44 montrealist

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

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

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

作为第四种选择，我阅读了一篇关于Flickr如何处理大量字符串数据的伟大文章。基本上只是解析一个大的字符串在管道上，然后在客户端上切断。这显着减少了服务器上的数据量，只增加了客户端的数量。

来源

2009-05-20 20:44:47 kim3er

问题的“可能的行动”部分你的问题有很大的不同。如果除了显示数据之外还需要使用其他数据来处理数据，作为JSON返回是一个更好的选择，因为您可以将数据作为原生JavaScript对象使用，而不必遍历HTML DOM。如果你打算做的只是展示它，我没有看到任何理由去经历用JavaScript构建显示的麻烦;只需在服务器上的表示层中构建HTML。

来源

2009-05-20 21:02:08

我想你错过了一个非常有效的选择，我经常使用这个选项。这是我的典型模式，它有没有让我失望... :-)

这里是基本的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属性。

Happy jQuerying :-)

来源

2009-05-20 21:29:37 KyleFarris

从AJAX调用中返回并显示数据的最佳做法

回答

相关问题