如何从 JavaScript ajax 调用和打印来自 Django 模板中视图的返回数据

Question

I have stored some data on localStorage( Itemnames and ItemIds), now I want to send itemid's to django views from ajax. I have basics knowledge of django and learning Javascript. I tried to figureit out by myself but its been more than 4 days I could not succeed, any help will be highly appreciated.

My Javascript:

$(document).ready(function() {
    var compare = localStorage.getItem("comparisionItems");
    var compareObj = JSON.parse(compare);
    
    var data_url = window.location.href;
    console.log(compare)
    console.log(compareObj)
    
   
      
      $.ajax({
        url: './compare',
        type: "POST",
        data: {'compare_id': compareObj },
        headers: { "X-CSRFToken": $.cookie("csrftoken") },
        dataType: "json",
        success: function (data) {
            console.log(data)
            
        },
        error: function () {
            alert("Some problem on passing data");
        }
        
    });
});

My views:

def compare(request):
is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
if is_ajax and request.method == "POST":
    compare_id= request.POST.getlist('compare_id[itemIds]')
    """compare_id=request.POST.getlist('itemIds[]')  """
   
    """compare_id = request.POST.get('compare_id')"""
    product = get_object_or_404(Products, id=compare_id)
    context={ 'product':product}
   
    """ return render (request, './ecommerce/compare.html', context)"""
    return render (request, './compare.html', context)
else:
    context = None
    return render(request,'./compare.html', context)

How can I get the products which have id's pass by ajax? And is there any different ways to pass those products to the template or I can do it just like the regular Django context process?

Answer 1

In your ajax you should stringify the data part like this:

 $.ajax({
    // rest of the code
    data: JSON.stringify({'compare_id': compareObj}),
    headers: { "X-CSRFToken": $.cookie("csrftoken") },
    dataType: "json",
    contentType: "application/json",
    success: function (data) {
        console.log(data);
        // access your response as data.product
    },
    // rest of the code
});

And then in you view:

import json
from django.http import JsonResponse

def compare(request):
   is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
   if is_ajax and request.method == "POST":
      compare_id = json.loads(request.POST.get('compare_id'))
      ids = compare_id.get('compare_id')
      # ids will be list of ids and you can get first id with index
      product = get_object_or_404(Products, id=ids[0])
      # rest of code
      return JsonResponse({'product': product})

Answer 2

Pass json string from your ajax request.

$.ajax({
    url: './compare',
    type: "POST",
    data: JSON.stringify({'compare_id': compare }),
    headers: { "X-CSRFToken": $.cookie("csrftoken") },
    dataType: "json",
    contentType : "application/json",
    success: function (data) {
        $.each(data, function (key, value) {
            if (key == "products") {
                for (var i = 0; i < data[key].length; i++) {
                     var wishlistUrl = "{% url 'ecommerce:add_to_wishlist' %}";
                      var div = '<div class="compare-col compare-product">';
                      div += '<a href="#" class="btn remove-product"><i class="w-icon-times-solid"></i></a>';
                      div += '<div class="product text-center"><figure class="product-media">';
                      div += '<a href="product.html"><img src="' + data[key][i].product_feature_image.image.url + '" alt="Product" width="228" height="257" />';
                      div += '</a><div class="product-action-vertical"><a href="#" class="btn-product-icon btn-cart w-icon-cart"></a>';
                      div += '<a href="#" class="btn-product-icon btn-wishlist w-icon-heart" title="Wishlist" attr_id="' + data[key][i].id + '" ';
                      div += ' action_url="' + wishlistUrl + '">';
                      div += '</a></div></figure><div class="product-details"><h3 class="product-name"><a href="product.html">' + data[key][i].name + '</a></h3>';
                      div += '</div></div></div>';
                      $('#parentDivElementId').append(div); #--- your parent div element id
                   }
               }
          })
     },
     error: function () {
          alert("Some problem on passing data");
     }
  });

And in your views.py

Get POST data first

 import json
 from django.shortcuts import get_list_or_404, render 

 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['compare_id']["itemIds"] if 'itemIds' in data['compare_id'] else []

        # since here multiple ids may come you need to use `filter` instead you will get 
        get() returned more than one Products -- it returned 2!

        products = Products.objects.filter(id__in=compare_ids).values()
        return JsonResponse({'products ': list(products) }, safe=False) #---- since Queryset is not JSON serializable

    else:
        context = None
        return render(request,'./compare.html', context)

In your console you can see your products data.