javascript - Django - csrf token 未定义

Question

这段代码的作用是让用户单击他们的描述并能够对其进行编辑。我弹出了模式，但保存按钮不会保存数据并产生以下错误:

Uncaught ReferenceError: csrftoken is not defined
at HTMLButtonElement.<anonymous> (modalShortListDescription.js:6)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.r.handle (jquery.min.js:3)

这里是调用模式的地方:

<div class="tab-content col-xs-12">
{% for list in lists %}
    <input type="hidden" id="idList" id_list="{{list.id}}">
    {% if forloop.first and not createTabActive %}
    <div role="tabpanel" class="tab-pane fade active in" id="list{{list.id}}">
    {% else %}
    <div role="tabpanel" class="tab-pane fade" id="list{{list.id}}">
    {% endif %}
        <div class="content col-xs-12">
            <div class="form-horizontal sort-by col-xs-12">
                <h3>Description</h3>
                    {% if list.description %}
                        <a href="#" data-toggle="modal" data-target="#modalDescription{{list.id}}" id="editDescription">{{list.description}}</a>
                    {% else %}
                        <a href="#" data-toggle="modal" data-target="#modalDescription{{list.id}}">None</a>
                    {% endif %}
                {% include "layout/popUp/modal-short-list-description.html" %}
                </div>

这是模式本身:

<div class="modal fade" id="modalDescription{{list.id}}" role="dialog">
  <div class="modal-dialog">
    <form class="form-horizontal" action="{% url 'update-list-description' %}" method="post">
    {% csrf_token %}
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Description</h4>
      </div>
      <div class="modal-body modal-body-exper modal-body-value modal-body-t">
          <div class="lineEnterValue lineTeamSize lineTitle">
              <div class="form-group {% if form.description.errors %} has-error{% elif form.is_bound %} has-success{% endif %}">
                        <div class="col-sm-10">
                            <textarea name="{{ form.description.html_name }}" class="form-control" id="{{ form.description.id_for_label }}" rows="5" style="margin: 0px; height: 90px; width: 455px;"></textarea>
                        </div>
                        {% if form.description.errors %}
                        <ul class="col-sm-10 col-sm-offset-2 error-list text-danger">
                        {% for error in form.description.errors %}
                            <li>{{ error|escape }}</li>
                        {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
          </div>
      </div>
      <div class="modal-footer modal-footer-value">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary" id="description_save">Save</button>
    </div>
  </div>
</form>
</div>

这是保存按钮使用的 .js:

$(document).ready(function() {
    $("#description_save").click(function() {
        var description = $("#form.description").val();
        var idList = $("#idList").attr("id_list");
        var url = "/bid/update-list-description";
        csrftoken();
        $.ajax({
            type: "POST",
            url: url,
            data: {description : description, idList: idList},
        }).done(function(response){
            $(".modalDescription").modal("hide");
            $(".editDescription").text(description);
        });
    })
})

编辑: View .py:

@csrf_protect
def updateListDescription(request):
    checkEmployer(request)
    pageClass="my-short-lists search-for-prospect"

    #shortList = get_object_or_404(List, id = request.POST.get("idList"))
    shortList = request.user.profile.profile_employers.employer_lists.filter(pk=request.POST.get("idList"))

    if request.method =="POST":
        form = ListForm(request.POST)
        if form.is_valid():
            shortList.description = form.cleaned_data["description"]
            shortList.save()
    else:
        form = ListForm()

    return redirect('my-short-lists')

Answer 1

编辑:

我认为问题不仅在于csrftoken，还在于按钮:如果按钮调用ajax，则不应该submit。如果它发布表单，则不应执行 ajax 调用。看来你在表单中添加了 token ，但是ajax首先做了他的事情......所以第一个答案似乎是有效的。

或者，

您可以在 $.ajaxSetup() 中为每个 ajax 调用添加 header 。 DOC 对这部分进行了解释:

1. 定义 getCookie(name) 方法；
2. 定义var csrftoken = getCookie('csrftoken');;
3. 使用这些行:

即:

function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

$.ajaxSetup({
   beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

那么您就不必更改任何 ajax 调用。 header 附加在每个 ajax 调用中。

https://docs.djangoproject.com/en/2.0/ref/csrf/ ，在“Ajax”部分下。

我已经使用了这种方法并且它有效。