Python Django Carton应用程序-让Ajax正常工作

我正在使用Django Carton购物车插件，并已使其正常工作。我现在正试图通过一个ajax调用添加到购物车中，并努力使代码正常工作。我得到一个错误，上面写着“TypeError at/api/cart/↵类型为“property”的对象不可JSON序列化（在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>

{%用于cat_开胃菜中的产品%}
{%csrf_令牌%}
{{product.name}


加入篮子


{%endfor%}
{%load carton_tags%}
{%get_cart as cart%}
这是你的购物车
这些是您篮子中的项目及其各自的总数

{cart.items%中的项目为%s}
{{item.quantity}}x{{item.product.name}}={{item.subtotal}
删除

{%endfor%}
{{cart.total}

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)
                 }
             })
         }

     })
 })

$（文档）.ready（函数（）{
var productForm=$（“.form product ajax”）/#form product ajax
productForm.submit（函数（事件）{
event.preventDefault（）；
console.log（“表单未发送”）
var thisForm=$（此）
//var actionEndpoint=thisForm.attr（“操作”）；
var actionEndpoint=thisForm.attr（“数据端点”）；
var httpMethod=thisForm.attr（“方法”）；
var formData=thisForm.serialize（）；
$.ajax({
url:actionEndpoint，
方法：httpMethod，
数据：formData，
成功：功能（数据）{
var submitSpan=thisForm.find（“.submitSpan”）
如果（添加数据）{
html（“购物车内添加到购物篮”）
}
var currentPath=window.location.href
if（currentPath.indexOf（“”）=-1）{
刷新购物车（）
}
},
错误：函数（errorData）{
console.log（“错误”）
console.log（errorData）
}
})
函数refreshCart（）{
console.log（“在当前购物车中”）
var cartTable=$（“.cart table”）
var cartBody=cartTable.find（“.cart-body”）
//$（cartBody）.empty（）
var productRows=cartBody.find（“.cart-product”）
var cartotal=cartTable.find（“.cart-total-sec”）
var currentUrl=window.location.href
var refreshCartUrl='/api/cart/'
var refreshCartMethod=“GET”；
变量数据={}；
$.ajax({
url:refreshCartUrl，
方法:刷新方法,，
数据：数据，
成功：功能（数据）{
console.log（“成功”）
console.log（数据）
如果（data.products.length>1）{
$（cartBody）.empty（）
productRows.html（“”）
$.each（数据、产品、功能（索引、值）{
console.log（值）
console.log（data.count）
cartBody.append（“+value.name+”“+value.price+”）
})
cartotal.find（“.cart total”）.text（data.total）
console.log（data.total）
}否则{
window.location.href=currentUrl
}
},
错误：函数（errorData）{
console.log（“错误”）
console.log（errorData）
}
})
}
})
})

我想你指的是

cart.total

而不是

cart.total

在你的

cart\u数据行中

（以后，请发布完整的回溯，以便我们更容易找到错误。）
我希望您的
购物车数据行中的
cart.total
不是
cart.total

（以后，请发布完整的回溯，以便我们更容易找到错误。）
谢谢，但我现在收到了一个不同的错误。“在/api/cart处出错/↵'列表“对象没有“全部”属性”。我怀疑这与这一行有关：products=[{“name”：x.name，“price”：x.price}代表cart.products.all（）中的x是；为什么在那里使用
.all（）
？正如错误所说，
产品
是一个列表；您试图在非查询集的对象上使用ORM查询方法。谢谢，但我现在遇到了一个不同的错误。“在/api/cart处出错/↵'列表“对象没有“全部”属性”。我怀疑这与这一行有关：products=[{“name”：x.name，“price”：x.price}代表cart.products.all（）中的x是；为什么在那里使用
.all（）
？正如错误所说，
产品
是一个列表；您正在尝试对非查询集的内容使用ORM查询方法。