從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調用中返回並顯示數據的最佳做法

回答

相關問題