Django Ajax 调用返回数量

Question

目前使用 django-carton 应用程序，我有一个 django 视图，它返回我在 ajax 调用中使用的 JSON 数据。从广义上讲，我已经让它工作了，但很难弄清楚如何传递我的项目数量（使用 ajax）。

在模板中，我可以使用以下方式调用我的商品数量：

{% for item in cart.items %}
{{ item.quantity }}

ajax调用连接视图返回Json数据：

def cart_detail_api_view(request):
    # cart_obj, new_obj = Cart.objects.new_or_get(request)
    cart = Cart(request.session)
    products = [{"name": x.name, "price": x.price} for x in cart.products]
    cart_data = {"products": products, "total": cart.total}
    return JsonResponse(cart_data)

这是我的 Jquery/Ajax 调用：

$(document).ready(function() {
        var productForm = $(".form-product-ajax") // #form-product-ajax
        productForm.submit(function(event) {
            event.preventDefault();
            // console.log("Form is not sending")
            var thisForm = $(this)
            //var actionEndpoint = thisForm.attr("action");
            var actionEndpoint = thisForm.attr("data-endpoint");
            var httpMethod = thisForm.attr("method");
            var formData = thisForm.serialize();
            $.ajax({
                url: actionEndpoint,
                method: httpMethod,
                data: formData,
                success: function(data) {
                    var submitSpan = thisForm.find(".submit-span")
                    if (data.added) {
                        submitSpan.html("In cart <button type='submit' class='btn btn-link'>Remove?</button>")} 
                    var currentPath = window.location.href
                    if (currentPath.indexOf("") != -1) {
                        refreshCart()
                    }
                },
                error: function(errorData) {
                    console.log("error")
                    console.log(errorData)
                }
            })
        })

        function refreshCart() {
            console.log("in current cart")
            var cartTable = $(".cart-table")
            var cartBody = cartTable.find(".cart-body")
            // $(cartBody).empty()
            var productRows = cartBody.find(".cart-product")
            var cartTotal = cartTable.find(".cart-total-sec")
            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("success")
                    console.log(data)

                    if (data.products.length > 1) {
                        $(cartBody).empty()
                        productRows.html("")
                        $.each(data.products, function(index, value) {
                            console.log(value)
                            console.log(data.count)

                            cartBody.append("<tr><td>" + value.name + "</td><td>" + value.price + "</td></tr>")
                        })
                        cartTotal.find(".cart-total").text(data.total)

                        console.log(data.total)



                    } else {
                        window.location.href = currentUrl
                    }

                },
                error: function(errorData) {
                    console.log("error")
                    console.log(errorData)
                }
            })
        }
    })

Answer 1

您必须指示您的 $.ajax() 调用您期待 JSON 格式的数据，因此 data 在您的 success 回调中被正确解析：

$.ajax({
    url: refreshCartUrl,
    method: refreshCartMethod,
    data: data,
    dataType: 'json',  // <- here
    success: function(data) {
        // ...
    },
    error: function(errorData) {
        // ...
    }
})