0
260
VistasHow can I send localstorage data from JavaScript ajax call and print return data from views in Django template
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?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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})
·
Juan Pablo Isaza
Denunciar
0
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.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta