Django Carton App - 让 Ajax 工作

Question

我正在使用 Django Carton 购物车插件，并且可以正常使用。我现在正试图通过 ajax 调用添加到购物车并努力让代码正常工作。我收到一条错误消息，上面写着“/api/cart/↵TypeError at /api/cart/↵Object of type 'property' is not JSON serializable”（在 Chrome 控制台上）。

Views.py

class ProductListView(ListView):
(redacted for clarity)

def add(request):
    cart = Cart(request.session)
    product = Product.objects.get(id=request.POST.get('id'))
    cart.add(product, price=product.price)
    added = True
    if request.is_ajax():
        print("Ajax request")
    json_data = {
        "added": added,
    }
    return JsonResponse(json_data)
    return redirect('list')

def remove(request):
    cart = Cart(request.session)
    product = Product.objects.get(id=request.GET.POST('id'))
    cart.remove_single(product)
    return redirect('list')

def show(request):
    return render(request, 'carts/carts.html')

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.all()]
    cart_data = {"products": products, "total": Cart.total}
    return JsonResponse(cart_data)

HTML 模板：

        {% for product in cat_appetizers %}
        <form method="POST" class='form-product-ajax' action='{% url "shopping-cart-add" %}' data-endpoint='{% url "shopping-cart-add" %}'>
            {% csrf_token %}
            {{ product.name }}
            <input type="hidden" name='id' value='{{ product.id }}'>
            <br/>
            <span class='submit-span'>
            <button>Add to Basket</button>
            </span>
        </form>
        <br/>
    {% endfor %}
        {% load carton_tags %}
        {% get_cart as cart %}
    <div>
        <h4>This is your shopping cart</h4>
        <table class="cart-table">
            <tbody class="cart-body">
                <tr>These are the items in your basket and their respective totals</tr><br>
                {% for item in cart.items %}
                <form method="GET" action='{% url "shopping-cart-remove" %}'>    
                <tr>{{ item.quantity }} x {{ item.product.name }} = {{ item.subtotal }}</tr>
                <input type="hidden" name='id' value='{{ item.product.id }}'>
                <button>remove</button><br>
                </form>
        {% endfor %}
            </tbody>
            <tr class="cart-total-sec"><td class="cart-price">{{ cart.total }}</td></tr>
    </div>

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'>ADD TO BASKET</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

我希望您在cart_data 行中指的是cart.total 而不是Cart.total。

（以后，请发布完整的回溯，以便我们更容易找到错误。）