Cannot send JSON data from Django to javascript - ajax

Question

I need to send some data from html file to django for some processing and return it back using ajax
But the response goes to the error callback in the ajax call with status=0
This is the ajax code, I've tried both commented URLs
function snapshot() {
ctx.drawImage(video, 0,0, canvas.width, canvas.height);
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
console.log(imageData)
//url:"{% url 'blind:getcaption' %}",
$.ajax({
type: 'GET',
url: 'http://127.0.0.1:8000/blind/ajax/getcaption/',
//url: /ajax/getcaption/
data: {
'img': imageData
},
dataType: 'json',
success: function (data) {
console.log(data);
},
error: function(request, status, error){
console.log(request, " " ,status, " ", error)
}
});
}
This is views.py
def getcaption(request):
img = request.GET.get('img', None)
data = {'caption': "This caption for test"}
return JsonResponse(data)
And urls.py
app_name = 'blind'
urlpatterns = [
path('', views.index, name='index'),
url(r'^ajax/getcaption/$', views.getcaption, name='getcaption'),
]
But when I type in the url tap url:'http://127.0.0.1:8000/blind/ajax/getcaption/ I get the json object back viewed in chrome

Answer 1

Firstly you can write the url in the ajax call as illustrated below and then parse the JSON you are getting on success.
function snapshot() {
ctx.drawImage(video, 0,0, canvas.width, canvas.height);
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
console.log(imageData)
//url:"{% url 'blind:getcaption' %}",
$.ajax({
type: 'GET',
url : '{% url "getcaption" %}',
data: {
'img': imageData
},
dataType: 'json',
success: function (data) {
console.log(JSON.parse(data));
},
error: function(request, status, error){
console.log(request, " " ,status, " ", error)
}
});
}
Then change your view, dump the dictionary to a json object before returning a json response:
def getcaption(request):
img = request.GET.get('img', None)
data = {'caption': "This caption for test"}
return JsonResponse(data)