使用 csrf 令牌的 ajax 视图上的 django 403 错误答案

【问题标题】：django 403 error on ajax view with csrf token使用 csrf 令牌的 ajax 视图上的 django 403 错误
【发布时间】：2014-08-21 05:10:38
【问题描述】：

我试图弄清楚如何在 django 中使用 ajax，但我一直遇到 403 错误。（这意味着据我所知，我的 CSRF 令牌出了问题。但我不知道我做错了什么。

网址：

urlpatterns = patterns('',
    url(r'^$', views.index, name='index'),
    url(r'^person/(?P<person_id>\d+)/$', views.person, name="person"),
    url(r'^search/$', views.search, name="search"),
    url(r'^search_person/$', views.search_person, name="search person"),
)

我的看法：

def search(request):
    args = {}
    args.update(csrf(request))
    return render(request, "search.html", args)

def search_person(request):
    if request.POST:
        search_text = request.POST['search_text']
    else:
        search_text = ""

    persons = Person.objects.filter(name__contains=search_text)
    return render_to_response("ajax_search.html", {"persons": persons})

我的模板： (search.html)

{% block js %}
    <script type="text/javascript" src="{% static 'assets/js/ajax_search.js' %}"></script>
{% endblock %}

{% block content %}
Search:<br>
{% csrf_token %}
<input type="text" id="search" name="search" />
<ul id="search-results">

</ul>
{% endblock %}

(ajax_search.html)

{% if persons.count > 0 %}
    {% for person in persons %}
    <li><a href="{% url 'person' person.id %}">{{ person.full_name }}</a></li>
    {% endfor %}

{% else %}
<li>No Results</li>

{% endif %}

最后是我的 jquery

$(function(){
    $('#search').keyup(function(){
        $.ajax({
            csrfmiddlewaretoken: $('input[csrfmiddlewaretoken]').val(), 
            type: "POST", 
            url: "/search_person/", 
            data: {
                'search_text': $('#search').val()
            },
            succes: searchSucces,
            dataType: "html"
        });
    });
});

function searchSucces(data, textStatus, jqXHR){
    $('#search-results').html(data);
}

我的 csrf 令牌有什么问题？

【问题讨论】：

直接在$.ajax({}) 上设置'csrfmiddlewaretoken': $('input[csrfmiddlewaretoken]').val() - 应该可以。
你能给我一个简短的例子吗？抱歉，对所有这些 jquery 来说都是新手
$.ajax({csrfmiddlewaretoken: $('input[csrfmiddlewaretoken]').val(), type: "POST", url: "/search_person/"}); 其余部分由您填写。
不断收到 403 错误
能否请您也出示一下您的urls.py？

标签： ajax django csrf

【解决方案1】：

我会向您发布一个用 Javascript 发出的 POST 请求，包括 CRSF 令牌，也许它可以帮助您：

function post_to_url(path, params) {
    method = "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    //We add the CSRF token
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "csrfmiddlewaretoken");
    hiddenField.setAttribute("value", getCookie('csrftoken'));
    form.appendChild(hiddenField);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "type_recherche");
    hiddenField.setAttribute("value", "loc");

    form.appendChild(hiddenField);

    document.body.appendChild(form);
    form.submit();
}

【讨论】：

【解决方案2】：

想通了怎么做，所以不妨张贴遮阳篷。

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');


$(function(){
    $('#search').keyup(function(){
        $.ajax({type: "POST", url: "/search_person/", 
            data: {
                'search_text': $('#search').val(),
                csrfmiddlewaretoken: csrftoken
            },
            success: searchSuccess,
            dataType: "html"
        });     
    });
});

function searchSuccess(data, textStatus, jqXHR){
    $('#search_results').html(data);
}

【讨论】：