Django-POST方法不适用于在模板中的for循环中创建的表单

我在模板中使用for循环来创建多个与Ajax一起工作的

method=“post”

表单。但是只有

项目列表
的第一个元素的表单工作正常，其余的根本不工作，显示错误405 0方法不允许。我认为他们都应该以同样的方式工作。只是想知道这个问题是由for循环还是其他什么引起的

cart\u items.html:

<script>
    $(document).ready(function () {
        $("#remove").click(function (event) {
            event.preventDefault();
            $.ajax({
                url: '{% url "cart:remove_from_cart" %}',
                type: "POST",
                dataType: 'json',
                data: {bookID: $('#idInput').val()},
                success: function (response_data) {
                    alert('works fine')
                },
                error: function (response_data) {
                    console.log('error occurred');
                }
            });
        });
    });
</script>

{% for book in items_list %}
    <div class="items">
        <p id="title"> {{ book.book.title }}, quantity: {{ book.quantity }} </p>
        <form method="post">
            {% csrf_token %}
            <input id="idInput" value="{{ book.book.id }}" >
            <button id="remove" type="submit"> Remove</button>
        </form>
    </div>
{% endfor %}

@csrf_exempt
def remove_books(request):
    cart = Cart.objects.get(user=request.user)
    if request.method == 'POST':
        passed_id = request.POST['bookID']
        secured_id = int(passed_id)
        response_data = {
            'quantity': secured_id
        }
        return JsonResponse(response_data)


$（文档）.ready（函数（）{
$（“.remove”）。单击（函数（事件）{
//event.preventDefault（）；//不认为button type=button需要它
var book_id=$（this.parent（）.find（'.idInput'）.val（）；//查找正确的输入框。
var csrf=$（'input[name=“csrfmiddlewaretoken”]”）。val（）；//获取变量中的csrf令牌。
//获取csrf令牌有多种方法，我个人喜欢这个^^，请参见https://docs.djangoproject.com/en/2.1/ref/csrf/#ajax 更多
$.ajax({
url:“{%url”购物车：从购物车“%}”中删除\u，
类型：“POST”，
数据类型：“json”，
数据：{
bookID:book_id，
csrfmiddlewaretoken:csrf//将csrf令牌添加到post数据
},
成功：功能（响应数据）{
警报（“工作正常”）
},
错误：函数（响应数据）{
console.log（'发生错误'）；
}
});
});
});
{%csrf_令牌%}
{项目中图书的%u列表%}
{{book.book.title}，数量：{{book.quantity}
去除
{%endfor%}
id必须是唯一的：在这里，您使用相同的
id=“remove”
定义了多个按钮，而且这可能会在JavaScript提交之前触发
提交，因此您可能需要删除JavaScript，或者将按钮更改为仅
remove
@WillemVanOnsem啊，我明白了，谢谢你也需要在ajax中发布
csrfmidlewaretoken
。非常感谢你，它成功了。但是它抱怨关于csrfmiddlewaretoken:{{csrf_token}
这条线路稍等一下，我会修好的。不确定哪里出了问题，但我们将对csrf使用不同的方法。编辑完我的文档后，我将再次发表评论answer@VaibhavVishal你是怎么修好的？我也有同样的问题，但还没有找到解决办法。@Olivillundy这是两年前的答案，所以我记不清了，但看看答案的编辑历史，我想我已经解决了。
<script>
    $(document).ready(function () {
        $(".remove").click(function (event) {
            // event.preventDefault();  // don't think it should be required with button type=button
            var book_id = $(this).parent().find('.idInput').val(); // find correct input box. 
            var csrf = $('input[name="csrfmiddlewaretoken"]').val(); // get csrf token in variable.
            // there are multiple ways to get csrf token, I personally like this ^^, see https://docs.djangoproject.com/en/2.1/ref/csrf/#ajax for more
            $.ajax({
                url: '{% url "cart:remove_from_cart" %}',
                type: "POST",
                dataType: 'json',
                data: {
                    bookID: book_id,
                    csrfmiddlewaretoken: csrf // add csrf token to post data
                },
                success: function (response_data) {
                    alert('works fine')
                },
                error: function (response_data) {
                    console.log('error occurred');
                }
            });
        });
    });
</script>

{% csrf_token %} <!-- It will render a hidden input field with csrf token in it. Keep it outside for loop but in html. No need to render exactly same element multiple times. -->
{% for book in items_list %}
    <div class="items">
        <p class="title"> {{ book.book.title }}, quantity: {{ book.quantity }} </p>
        <form method="post">
            <input class="idInput" value="{{ book.book.id }}" > <!-- use class not id -->
            <button class="remove" type="button"> Remove</button> <!-- you can use button type=button to avoid form submit and hence avoid event.preventDefault(); in js -->
        </form>
    </div>
{% endfor %}