当 content_type='application/json' 时 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" 放在上面。