当content_type =＆＃39; application / json＆＃39;时，Django HttpResponse呈现html。

Question

我想用jquery与django视图进行ajax调用。此视图查询外部API，然后返回结果。我试图返回数据并在ajax调用的成功回调中操作它，但我得到一个呈现的html网站显示响应的内容。这是我的代码。

我的表格：

<form class="form-inline" method="get" action="/search/">
    <div class="input-group">
        <input type="text" class="form-control" id="search" name="search" placeholder="Search">
    </div>
    <button id="btn-search" class="btn btn-default" type="submit">SEARCH</button>
</form>

我的ajax电话：

$('#btn-search').click(function() {
        var params = {
            'query': $('#search').val()
        }
        $.ajax({
            data: params,
            url: JS_URLS['search'],
            type: 'get',
            success: function (data) {
                alert("SUCCESS");
            },
            error: function (data) {
                alert("ERROR");
            }
        });
})

我的观点：

def search(request):
    if request.GET:
        params = {
            'name'   : request.GET['search'],
        }
        encoded_params = urllib.urlencode(params)
        response = execute_request(url)
        return HttpResponse(json.dumps(response), content_type='application/json')

我得到了什么：

显然，响应没有返回到ajax函数，因为我没有在成功和错误回调中设置警报消息。

Answer 1

您发送的数据为params，其中query为关键字，而不是search。因此，您可能会获得KeyError，因为您没有在查询字符串中设置search。这会返回一个Django的黄色错误页面，它是html。 并查看http://api.jquery.com/jquery.getjson/

Answer 2

通过GET提交表单会导致您的浏览器出现重新加载事件。

您必须阻止表单的默认行为，正确的地方是表单元素本身。

为您的表单提供ID：

<form id="mysearchform" class="form-inline" method="get" action="/search/">
    <div class="input-group">
        <input type="text" class="form-control" id="search" name="search" placeholder="Search">
    </div>
    <button id="btn-search" class="btn btn-default" type="submit">SEARCH</button>
</form>

将javascript更改为：

$("#mysearchform").submit(function(e){
       e.preventDefault(); 
       var params = {
            'query': $('#search').val()
        }
        $.ajax({
            data: params,
            url: JS_URLS['search'],
            type: 'get',
            success: function (data) {
                alert("SUCCESS");
            },
            error: function (data) {
                alert("ERROR");
            }
        });
    return false;
});

这里重要的是防止进一步执行默认表单提交行为。 e.preventDefault()和return false会照顾到这一点。

根据您的目标，您根本不需要表格：

    <div class="input-group">
        <input type="text" class="form-control" id="search" name="search" placeholder="Search">
    </div>
    <button id="btn-search" class="btn btn-default">SEARCH</button>

将javascript更改为：

$("#btn-search").click(function(e){
        $.ajax({
            url: JS_URLS['search']+'?query='+$('#search').val(),
            type: 'get',
            success: function (data) {
                alert("SUCCESS");
            },
            error: function (data) {
                alert("ERROR");
            }
        });
    return false;
});

这也可以在表单中使用，但不要在其上放置type="submit"。