Ajax 请求在 Django 中无法正常工作

Question

ajax请求的JS代码

<script type="text/javascript">
    $(document).ready(function(){
        console.log("IN")
        var cartUpdateForm = $('.js_cart_update_form')
        cartUpdateForm.submit(function(event){
            event.preventDefault()
            var thisform    = $(this);
            var method      = thisform.attr("method");
            var api         =  thisform.attr("api");
            var data_       = thisform.serialize();
            var current     = window.location.href
            console.log(method,api,current,data_)
            $.ajax({
                url:api,
                data:data_,
                type:method,
                success:function(data){
                    console.log("success")
                    console.log(data)
                    update_table(data)
                },
                error:function(data){
                    console.log('error')
                }

            });
                 function update_table(data){
                    table_ = $('.js_cart_table')
                    table_body_ = table_.find(".js_cart_body")
                    table_body_.html("")
                    remove_form = $(".js_remove_form")
                    if(data.items.length > 0){
                        $.each(data.items , function(index , val){
                            var rmf = remove_form.clone()
                            rmf.css('display','block')
                            rmf.find(".cart_item_id").val(val.id)
                            table_body_.prepend("<tr><td>"+val.name+"</td> 
<td>"+val.price+"</td><td>"+rmf.html()+"</td></tr>")
                        });
                    }
                    else
                    {
                        console.log("reloading..")
                        window.location.href = current
                    }
                }
            });
        });
    </script>

views.py 中的更新api：

def update_util(request):
    pk = int(request.POST.get('item_id'))
    rest_id  = request.session['rest_id']
    restaurant = Restaurant.objects.get(pk = rest_id)
    cart_obj = Cart.objects.new_or_create(request)
    remove = request.POST.get('remove')
    item = FoodItem.objects.get(pk=pk)
    # print(pk)
    if remove == '1': 
        cart_obj.items.remove(item)
    else:
        cart_obj.items.add(item)

def update(request):
    update_util(request)
    rest_id  = request.session['rest_id']
    return redirect(reverse('restaurant:menu', kwargs={'pk':rest_id}))

def updateapi(request):
    if request.is_ajax():
        update_util(request)
        cart_obj = Cart.objects.new_or_create(request)
        print(request.POST.get('remove') ,'called')
        items = []
        data = {}
        for item in cart_obj.items.all():
            items.append({'name':item.name , 'price':item.price 
,'id':item.id})
        data_ = {'items':items , 'total':cart_obj.total , 
'subtotal':cart_obj.subtotal}
    return JsonResponse(data_)

正在调用删除的 HTML 表单：

<table class="table js_cart_table">
<thead>
    <th>Item</th><th>Price</th><th></th>
</thead>
<tbody class="js_cart_body">
    {% for item in cart.items.all %}
            <tr><td>{{ item }}</td> <td>   {{ item.price  }}</td>
                <td>{% include 'cart/include/remove_cart.html' with 
 item_id=item.id %}</td>
            </tr>
    {% endfor %}
</tbody>

    </table>
    <div class="js_remove_form" style="display: none;">
    {% include 'cart/include/remove_cart.html' %}</div>
 </div>

remove_cart.html：

<form class='js_cart_update_form' api="{% url 'cart:update_api' %}" action=" 
{% url 'cart:update' %}"  method='POST'>
    {% csrf_token %}
    <input class='cart_item_id' type="hidden" name="item_id" value= "{{ 
item_id }}">
    <input type="hidden" name="remove" value="1">
    <input class=" btn btn-xs btn-danger js_update" type='submit' value="X">
</form>

同样是add，只是remove的隐藏值是0，输入类型submit的值是Add。

购物车中的商品是正常添加的，但是当页面第一次重新加载和第二次发生 ajax 调用时删除它们时，这种情况会交替发生。

不知道我为什么会有这种奇怪的行为。

Answer 1

这是正常的，是因为CSRF令牌。 试试这个：

var csrftoken = $('[name="csrfmiddlewaretoken"]').val();

然后在你的 Ajax 请求中包含这个

$.ajax({
 ...
 headers: {
    'Accept': 'application/json', //if json
    'Content-Type': 'application/json', //if json
    "X-CSRFToken": csrftoken
    },
    credentials: 'include',
 ....
})

它对我有用

Answer 2

这是因为您需要在 AJAX 请求中设置 CSRF，就像在正常请求中一样。

将以下代码添加到您的 JavaScript：

// This handles generation of CSRF token
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;
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    }
});

参考文档：https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax

我希望这会有所帮助。

祝你好运！