Django json loads fails because of empty query dict in request Object - ajax

Question

I have ajax call posted to /cart/total where I am dumping JSON string stored in local storage using post when I run json loads it shows me the error.
TypeError(f'the JSON object must be str, bytes or bytearray, '
TypeError: the JSON object must be str, bytes or bytearray, not QueryDict
and my JSON string before parsing looks like having an empty feild, which I am not aware of in Django
<QueryDict: {'{"32":1,"33":1,"34":2}': ['']}>
<script>
function addtocart(mitem, mprice) {
if(localStorage.getItem('cart')==null){
// var mobj = {}
// var countQ ={}
var price = String(mprice)
var mobj = { [String(mitem)]: 1 }
var countQ = {'Quantity':1}
var storeobj = JSON.stringify(mobj)
var storeCountq = JSON.stringify(countQ)
localStorage.setItem('cart', storeobj)
localStorage.setItem('quantity',storeCountq)
console.log(localStorage.getItem('cart'))
}else{
var data = localStorage.getItem('cart')
var quant = localStorage.getItem('quantity')
var obj = JSON.parse(data)
var parsequant = JSON.parse(quant)
if(obj.hasOwnProperty(String(mitem))){
obj['%s',mitem]++
parsequant['Quantity']++
var storeobj = JSON.stringify(obj)
console.log(localStorage.getItem('cart'))
var storeCountq = JSON.stringify(parsequant)
localStorage.setItem('cart', storeobj)
localStorage.setItem('quantity', storeCountq)
}
else{
obj[String(mitem)] = 1
parsequant['Quantity']++
var storeobj = JSON.stringify(obj)
console.log(localStorage.getItem('cart'))
var storeCountq = JSON.stringify(parsequant)
localStorage.setItem('cart', storeobj)
localStorage.setItem('quantity', storeCountq)
}
}
}
function ajaxcall(){
$.ajax(
{
type: "POST",
url: "/cart/total",
data: localStorage.getItem('cart'),
success: function () {
console.log("sent tdata")
}
})
}
ajaxcall()
</script>
<p style="position: absolute; bottom: 0px"><button class="button" style="width: 200px" onclick="addtocart( '{{M.Menu_Item_Id}}', '{{M.Menu_ItemPrice}}' )" >Add to cart</button>
view function
#csrf_exempt
def cartpricecalculator(request):
if request.method == 'POST':
data = json.loads(request.POST)
print(request.POST)
return HttpResponse('200 Okay')
I am not sure what I am doing wrong, any help is appreciated.

Answer 1

request.POST is for form data. You need;
data = json.loads(request.body)

Answer 2

Try:
In JS, pass a dict instead of a string. As per the documentation of ajax, data must be an Object with key and value or stringify of an Object with key and value.
Ref: https://api.jquery.com/jQuery.ajax/
function ajaxcall(){
$.ajax(
{
type: "POST",
url: "/cart/total",
data: {'cart': localStorage.getItem('cart')},
success: function () {
console.log("sent tdata")
}
})
}
In python
#csrf_exempt
def cartpricecalculator(request):
if request.method == 'POST':
cart_data = json.loads(request.POST.get('cart', '{}'))
print(request.POST)
print(request.POST.get('cart'))
return HttpResponse('200 Okay')