如何处理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){
...
})