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

Question

到目前為止，我已經使用django模板系統來執行這種操作。 只需使用html模板響應ajax請求即可。

現在我正在嘗試實現自動完成搜索功能，我想以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>

感謝您的任何反饋！

Answer 1

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

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

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

Answer 2

嘗試

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){
...
})