javascript - 使用 jquery 删除后无法更新购物车表

Question

当我从购物车中删除商品时。项目在后端删除，但在前端网页上显示 json 数据

{"added": false, "removed": true, "CartItemsCount": 3}

并且没有显示实际的购物车（表格）。代码附在图片中。可以的话请帮忙，谢谢。

在 chrome 的控制台日志中，此消息会持续纳秒并消失.. resource interpreted as document but transferred with mime type application/json django

用于购物车更新的 django 视图（删除或添加项目）

def cart_update(request):
    contact_id = request.POST['contact_id']
    obj_product = Contacts.objects.get(id=contact_id)
    cart_obj, new_obj = Cart.objects.new_or_get(request)
    if obj_product in cart_obj.contacts.all():
        cart_obj.contacts.remove(obj_product)
        added = False
    else:
        cart_obj.contacts.add(obj_product)
        added = True

    request.session['cart_item'] = cart_obj.contacts.count()
    if request.is_ajax:
        json_data = {
            "added": added,
            "removed": not added,
            "CartItemsCount": cart_obj.contacts.count(),
        }
        return JsonResponse(json_data, status=200)

    else:
        print('HTTP referer')
        return HttpResponseRedirect(request.META.get('HTTP_REFERER'))  #redirect to same page

使用 api 获取购物车数据的 django 视图

def cart_api(request):
    cart_obj, new_obj = Cart.objects.new_or_get(request)
    products =[{'name':x.firstname,
                'id':x.id,
                'price':x.price}
               for x in cart_obj.contacts.all()]
    cart_data = {'products':products, 'subtotal':cart_obj.subtotal, 'total':cart_obj.total}
    return JsonResponse(cart_data)

javascript

<script type="text/javascript">

    console.log("Not In Cart")
    $(document).ready(function() {
        var productForm = $(".form-product-ajax")
        productForm.on('submit', function(e) {
            e.preventDefault();

            var thisForm = $(this)
            var actionEndPoint = thisForm.attr("action");
            var httpMethod = thisForm.attr("method");
            var formData = thisForm.serialize();
            var CurrentPath = window.location.href
            $.ajax({
                url: actionEndPoint,
                method: httpMethod,
                data: formData,
                success: function(data) {
                    console.log("success")
                    refreshCart()
                    var submitSpan = thisForm.find(".submit-span")
                    if (CurrentPath.indexOf("cart/") == -1) {
                        if (data.added) {
                            submitSpan.html("<button type='submit' name='submit' class='btn btn-danger'>Remove</button>")
                        } else {
                            submitSpan.html("<button type='submit' name='submit' class='btn btn-success'>Add to Cart</button>")
                        }
                    } else {}
                    var itemCount = $(".navbar-cart-itemcount")
                    itemCount.text(data.CartItemsCount)
                    console.log("Testing")
                },
                error: function(errorData) {
                    console.log("Eror")
                    console.log(errorData)
                }
            })
        })



        function refreshCart() {
            var cartTable = $(".cart-home")
            var cartBody = cartTable.find(".cart-body")
            var productRows = cartBody.find(".cart-product")
            var currentUrl = window.location.href
            var refreshCartUrl = "/api/cart/"
            var refreshCartMethod = "GET";
            var data = {};
            $.ajax({
                url: refreshCartUrl,
                method: refreshCartMethod,
                data: data,
                success: function(data) {
                    console.log(data, "Your Data Here")
                    var HiddenCartItemRemoveForm = $(".cart-item-remove-form")
                    console.log("showig Cart Item.");
                    if (data.products.length > 0) {
                        i = data.products.length
                        productRows.html("")
                        $.each(data.products, function(index, value) {
                            var newCartItemRemove = HiddenCartItemRemoveForm.clone()
                            newCartItemRemove.css = ("display", "block")
                            newCartItemRemove.find(".cart-item-product-id").val(value.id)
                            HiddenCartItemRemoveForm.find(".cart-item-product-id").val(value.id)
                            cartBody.prepend("<tr><th scope='row'>" + i + "</th><td colspan=2>" + value.name + newCartItemRemove.html() + "</td><td>" + value.price + "</td></tr>")
                            i--
                        })
                        cartBody.find(".cart-subtotal").text(data.subtotal)
                        cartBody.find(".cart-total").text(data.total)
                        var itemCount = $(".navbar-cart-itemcount")
                        itemCount.text(data.CartItemsCount)
                    } else {
                        window.locatin.href = currentUrl
                    }
                },
                error: function(errorData) {
                    console.log("error")
                    console.log(errorData)
                }
            })
        }
        if (window.location.href.indexOf("cart") > -1) {
            refreshCart()
            console.log("Current Cart")
        }
    })
</script>

错误信息：{"added": false, "removed": true, "CartItemsCount": 3}

Django的购物车更新视图功能

jQuery代码

更新jquery的Cart功能

api-cart 视图函数 Django

错误信息

标签： javascriptjquerydjangoajax