Javascript AJAX与Django

我正在尝试将一个简单的AJAX函数与Django结合起来，我不知道我做错了什么。request.is_ajax返回False，即使我执行event.preventDefault，表单仍在提交中

以下是视图：

def search(request):
    if request.is_ajax():
        search_text = request.POST.get('search_text', False)
    else:
        search_text = 'Not AJAX'
    return HttpResponse(search_text)

JS：

$(function(){

    $('#search_form').submit(function(event){
        event.preventDefault();

        $.ajax({
            type: 'post',
            url: {% url 'users:search' %},
            dataType: 'html',
            data: {
                'search_text': $('#search').val(),
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(data){
                $('#search-results').html(data);
                },
            failure: function(data){
                alert('Got an error');
                }
        });
        return false;
    });

});

以及HTML：

 <div class="col-md-4">
            <h5>Search</h5>
            <form action="{% url 'users:search' %}" method="POST" id="search_form" name="search_form">
                {% csrf_token %}
                <input type="text" id="search" name="search">
                <input type="submit" value="Search">
            </form>
            <ul id="search-results">
                {% if users %}
                    {% for user in users %}
                        <li><a href="{% url 'users:detail' user.id %}">{{ user.username }}</a></li>
                    {% endfor %}
                    {% else %}
                        <p>No user available</p>
                {% endif %}
            </ul>
        </div>

---

我相信表单实际上总是提交的，因为你的js中有一个错误。在$ajax选项中，url应该用引号括起来：

$.ajax({
    type: 'post',
    url: '{% url 'users:search' %}',
    ...
});

---

在您的问题中，您说request.is_ajax为False，这意味着实际执行了ajax调用。我想这里不是这样的。鉴于上面的代码示例，调用根本不会发生，并且不应执行任何视图代码。

如果您已将js与html分离，为什么要在js中使用模板语言

url: '{% url 'users:search' %}',

我认为你应该这样做：

url: 'search',

---

我已经找到了问题所在

我将JavaScript代码更改为：

$(document).ready(function(){

    $('#search_form').submit(function(event){

        event.preventDefault();

        $.ajax({
            type: 'POST',
            url: '/users/search/',
            data: {
                'search_text': $('#search').val(),
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val() // properly capture the CSRF Token
            },
            success: function(data){
                $('#search-results').html(data);
                },
            failure: function(data){
                alert('Got an error');
                }
        });

    });
});

---

错误是CSRF令牌未与其余数据一起发送。希望以后有人能发现这很有用。我犯了一个愚蠢的错误。

该视图的url模式是什么？urlr^'search/$'，views.search，name='search'As@ppetrid在我的回答中评论说，需要澄清js代码的位置。它在html模板中吗？如果答案是肯定的，那么请更新你的问题以反映这一点。它不在模板中，模板标签是一个愚蠢的错误。更改后，它仍然无法正常工作。仍然将我发送到新页面，返回的不是没有修复它的Ajax。视图被执行。当表单提交时，它会将我带到url并打印结果。结果不是AJAXI，因为有一个传统的表单提交，所以可以看出请求不是AJAX的原因。但我认为一定有javascript解析错误。这是我经常遇到的，由于拼写错误或一个小的解析错误。js代码无法执行，因此它执行默认的提交操作。尝试在html Hello中添加一个空目标，我怀疑OP在模板文件中使用了上述js代码，因为他也在那里打印csrf令牌。但这是一个很好的观点，需要澄清。如果您不想在post请求上进行csrf验证，您也可以使用@csrf\u豁免decorator来查看方法。