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

如何处理JSON响应并从中输出html？

2 个答案: