AJAX 与 Django

Question

我正在尝试将一个简单的 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>

Answer 1

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

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

在您的问题中，您说request.is_ajax 是False，这意味着实际执行了ajax 调用。我认为情况并非如此。鉴于上述代码示例，根本不会发生调用，也不应执行任何视图代码。

Answer 2

如果你把js和html分开了，为什么在js中使用模板语言。

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

我认为你应该这样做：

url: 'search',

Answer 3

我已经弄清楚出了什么问题。

我将 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 令牌没有与其余数据一起发送。希望有人能在以后发现这很有用。我犯了一个愚蠢的错误。