如何處理JSON響應並從中輸出html？

到目前爲止，我已經使用django模板系統來執行這種操作。只需用html模板迴應ajax請求。如何處理JSON響應並從中輸出html？

現在我試圖實現一個自動完成搜索功能，我想以json格式發送回客戶端的響應。

一切都很好，並設置到這一點。這是我的jQuery部分：

$(document).ready(function(){ 
    $("#id_q").keyup(function(){ //the form text input 
     autocomplete(this.value); 
    }); 

    function autocomplete(inputString) { 
     if(inputString.length == 0) { 
      $('#autocomplete').fadeOut(); 
     } 
     else { 
      $.get("/autocomplete/", {q: ""+inputString+""}, function(data) { 
       $('#autocomplete').fadeIn(); 
       $('#autocomplete').html(data); 
      }); 
     } 
    } 
});

當使用Django模板作爲響應，#autocomplete DIV被顯示出來不錯，與html的（數據）預期的，那是因爲我在設置HTML模板，因爲我希望它被顯示。

如何處理從服務器發送的數據（以json格式）？數據看起來是這樣的：

[{'title':'titleString', 'descr':'desriptionString', 'url':'itemAbsoluteUrl'}, ..]

爲了得到我的#autocomplete HTML，說，是這樣的：

<li><a href="data.url">data.title<br>data.descr</li>

感謝您的任何反饋！

來源

2012-07-19 marius_5

嘗試

var li = $('<li><a href="'+data.url+'">'+data.title+'<br/>'+data.descr+'</a></li>')

，然後你可以插入li你想要，或

$('#autocomplete').html('<li><a href="'+data.url+'">'+data.title+'<br/>'+data.descr+'</a></li>');

要通過結果

$.each(results, function(index, value){ 
... 
})

來源

2012-07-19 13:40:56

乾杯！我會嘗試 – 2012-07-19 13:44:00

讓我知道，如果這是你在找什麼。 – 2012-07-19 13:47:58

是的，它解決了！我必須在使用$ .each循環時使用value.url，value.title和value.descr – 2012-07-19 14:02:22

首先，爲了將返回數據格式化爲JSON對象，您需要在get調用中指定返回類型爲json。之後，您可以基於json鍵值對引用數據，例如data.results。（請注意，結果必須是JSON對象中的關鍵字）。

$.get("/autocomplete/", {q: ""+inputString+""}, function(data) { 
      $('#autocomplete').fadeIn(); 
      $('#autocomplete').html(data.results); 
}, "json");

我不確定你目前的格式是什麼，但只是爲了澄清，你可能不想通過JSON發送原始HTML。相反，請將HTML保留在客戶端頁面上，並返回一些數據來填充它。

來源

2012-07-19 12:54:29 Chris

雖然我與你的答案達成一致，我不重複通過ajax加載「視圖」沒有看到任何問題。 – 2012-07-19 13:15:53

如果視圖將保持不變但充滿不同的數據，那麼根據我所知，沒有理由浪費時間/資源通過管道發送所有靜態HTML。如果觀點將發生變化，那麼這當然是另一回事了。 – Chris 2012-07-19 13:30:52

感謝您的反饋意見;我編輯了我的問題，以便你們能更好地理解我後面的內容 – 2012-07-19 13:34:11

如何處理JSON響應並從中輸出html？

回答

相關問題