如何将 Django Ajax 返回作为模板数据打印？

Question

我想打印模板上以下视图返回的Products 数据。当我检查上下文时，它打印了正确的数据，但是当我尝试在模板中打印数据时，它什么也没显示。我在浏览器控制台中检查了网络，那里调用了数据，但我不知道为什么它不打印到视图

模板

 {% for product in products%}
                    {{product.name}}
                    {%endfor%}

我的阿贾克斯：

$(document).ready(function() {
    var compare = localStorage.getItem("comparisionItems");
    var compareObj = JSON.parse(compare);
    
    
    
    console.log(compareObj)
    
   
      
    $.ajax({
      url: './compare',
      type: "POST",
      data: compare,
      headers: { "X-CSRFToken": $.cookie("csrftoken") },
      dataType: "json",
      contentType : "application/json",
      processData: "false",
      success: function (data) {
        location.reload();
          
       },
      
    });
});

Views.py

def compare(request):
    is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
    if is_ajax and request.method == "POST":             
        data = json.loads(request.body)     
        compare_ids = data['itemIds']      
        products = Products.objects.filter(id__in=compare_ids)   
        print(products)   
        context={'products':products}
        return render(request,'./compare.html', context)
    else:
     return render(request,'./compare.html')

Answer 1

QuerySet 是惰性的！

当您在浏览器控制台中调用 print() 函数或 log() 函数时，产品查询集将立即评估

您可以使用 all() 以便它在您的模板中进行评估：

products = Products.objects.filter(id__in=compare_ids).all()

也看看这个documentions

---

服务器端：

因为你不打数据库，所以使用GET方法：

在views.py中

from django.views.decorators.http import require_GET

@required_GET
def compare(request):
    is_ajax = request.headers.get('X-Requested-With') =='XMLHttpRequest'
    if is_ajax:             
        compare_ids = request.GET.get('itemIds')          
        products = Products.objects.filter(id__in=compare_ids).all()     
        context={'products':products}
        return render(request,'./compare.html', context)
    else:
     return render(request,'./compare.html')

---

客户端：

你应该替换html也不重新加载

$.ajax({
      url: './compare',
      type: 'GET',
      data: compare,
      success: function (data) {
        console.log(data);
        $('your_list_selector').html(data);
       },
      
    });