CSRF令牌丢失或无效。 - >第一个表单失败了其他CSRF令牌工作

Question

所以我有一个有多个按钮的网站。这些按钮位于表单内部并使用此{CSRF}。但是第一个按钮不起作用。

这是HTML的样子片段。

<form  method="post" id="post-form">
                      {% csrf_token %}
                      <button type="submit" name="startVm" class="btn btn-default btn-block d-none d-md-block">StartVM</button>
                </form>
                <form  method="post" id="post-form">
                      {% csrf_token %}
                      <button type="submit" name="stopVm" class="btn btn-default btn-block d-none d-md-block">StopVM</button>
                </form>

这是我使用的Ajax函数。

$('#post-form').on('submit', function(e){
        e.preventDefault();
        console.log("form submitted!")  // sanity check
        post();
    });
    // AJAX for posting
    function post() {
        console.log("create post is working!") // sanity check
        $.ajax({
            url : '', // the endpoint
            type : 'post', // http method
            data : {},
            csrfmiddlewaretoken: '{{ csrf_token }}',
            contentType: 'application/x-www-form-urlencoded',
            processData: true,
            // handle a successful response
            success : function() {
               alert("Thank you for your comment!");
                console.log("success"); // another sanity check
            },

            // handle a non-successful response
            error : function(xhr,errmsg,err) {
                $('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                    " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
                console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
            }
        });
    };

所以我说。按钮StartVM将不起作用，它返回403错误。（禁止（CSRF令牌丢失或不正确。）：/）然而第二个工作没有问题。

这是view.py中的代码

def post (self, request):
    if request.method == 'POST' and 'startVm' in request.POST:
        print("startVM button")
        return HttpResponse("{}",
        content_type='application/json', status=204)
    if request.method == 'POST' and 'stopVm' in request.POST:
        print("stopVM button");
        return HttpResponse("{}",
        content_type='application/json', status=204)
    return HttpResponse("{}",
    content_type='application/json')

我返回状态204，因为e.preventDefault（）将无法工作，如果我点击一个按钮，它将刷新整个站点。

Answer 1

首先，ID应该是唯一的，但是你有两种不同形式的id="post-form"。

你可以改为使用class="post-form"，并改变你的JS以使用.post-form。

或者，对于您问题中的模板，您可以使用包含两个按钮的单个<form>标记。

接下来，您需要在表单数据中包含CSRF令牌。

data : {'csrfmiddlewaretoken': '{{ csrf_token }}'},

或者，您可以按照文档中的suggestion，并为ajax请求添加X-CSRFToken标头，然后您不需要在帖子数据中包含该标记。