如何在不刷新页面的情况下使用 jquery 将数据从我的 django 视图动态加载到我的 django 模板？

Question

我正在尝试将数据从我的 django 视图加载到我的 django 模板中，而不用 jquery 刷新页面。 我的视图中有一个购物车功能，它返回用户购物车中的所有项目。 我想在使用 jQuery 的 django 模板中单击按钮时显示所有项目。 我似乎无法弄清楚我做错了什么。

以下是我的观点：

def cart(request):
template = loader.get_template("main/cart.html")
if request.user.is_authenticated:
    email = request.user.email
    usercartitems = request.user.cart_item_set.all()
    cartitems = []
    store = ""
    totalprice = 0
    numberofitemsincart = len(cartitems)
    for item in usercartitems:
        quantity = item.product_quantity
        store_id = item.store_id
        product_id = item.product_id
        storedetail = Store_detail.objects.get(pk = store_id)
        product = Product.objects.get(pk = product_id)
        item = {"quantity":quantity, "product":product}
        cartitems.extend([item])
        store = storedetail
        numberofitemsincart = len(cartitems)
        product = Product.objects.get(pk = product_id)
        totalproductprice = product.price * int(quantity)
        totalprice += totalproductprice
    context={
    'store':store,
    'email':email,
    'cartitems':cartitems,
    'numberofitemsincart':numberofitemsincart,
    'totalprice':totalprice,
    }
    return HttpResponse(template.render(context,request))
elif request.user.is_authenticated is False:
    if request.session.get('cart'):
        allitems = request.session['cart']
        cartitems = []
        totalprice = 0
        for item in allitems.values():
            store_id = item['store_id']
            quantity = item['quantity']
            product_id = item['product_id']
            product = Product.objects.get(pk = product_id)
            store = Store_detail.objects.get(pk = store_id)
            totalproductprice = product.price * int(quantity)
            totalprice += totalproductprice
            cartdict = {'store':store,'product':product,'quantity':quantity,}
            cartitems.append(cartdict)
        context = {
            'cartitems':cartitems,
            'totalprice':totalprice,
        }
    else:
        context = {}
    return HttpResponse(template.render(context,request))
else:
    return HttpResponse(template.render(context,request))

这是我的 jQuery：

$('#cart').click(
        function(e){
          e.preventDefault();
          $.ajax({
            type:"GET",
            dataType: "json",
            url:"{% url 'main:cart' %}",
            data: {
                  'cartitems': cartitems
                }
            success:function(data){
              console.log(data);
            }
          });
        });

Answer 1

而不是使用HttpResponse(template.render(context,request)) ，你应该使用render快捷方式：

from django.shortcuts import render

def cart(request):
    ...

    return render(request, 'main/cart.html', context)

Answer 2

看起来您想根据您的请求处理json数据。 如果您的 html 页面中只有一项要更新，那么对我来说没有必要渲染整个内容，而jquery是一种方法。

我也认为处理上下文内容太复杂了。 这是一个向用户json响应的示例，然后您可以在jquery代码中使用它：

from django.http import JsonResponse

def cart(request):
    try:

        [...] # your stuff

        # define here the json data you want to return, in a list
        your_json_data = [{
            'key1': val1, 
            'key2': val2,
            ...
        }]

        return JsonResponse(your_json_data, safe=False)

    except Exception as e:
        return JsonResponse({})

然后，您将能够处理刚刚获取的数据！