Json does not work in Django with Ajax

Question

I want to make an ajax request in a Django framework. However, I don't pass to get data from the client in json. It works when I don't use Json. If I use dataType:'json' with a {'a': 'value'} in the ajax, I can't get it in the view.py, the result is nothing... However if I use data:$(this).serializeArray() in the ajax I can get result with request.POST. However, I really need to customize my data and send to my view.py other data than the data from the form. I would like to send a {'a', 'mydata', 'form': myformdata}... Is there a way to do it?

template:

<form id="ajax2" action="/seghca/test-post/" method="post">{% csrf_token %}
Nom : <input type="text" name="nom" value="" id="nom"/><br/>
prenom : <input type="text" name="prenom" value=""/><br/>
<input type="submit" value="Envoyer"/>
</form>


<div id="result"></div>

javascript:

$(document).ready(function(){


        // POST AJAX
        $("#ajax2").submit( function() {
        var urlSubmit = $(this).attr('action');

        var data = $(this).serializeArray();
        data.push({
                key:   "keyName",
                value: "the value"
            });
        $.ajax({  
            type: "POST",
            url: urlSubmit,
            dataType: "json",               
            data      : data,//$(this).serializeArray(),
            success: function(response){
                 var json_response = JSON.parse(response);
                    // now get the variables from the json_response
                    $('#result').html(json_response.html);
            }
        });
        return false;
    });

    });

view.py (the ajax launch the test_post view, home2 is the view of the formular):

from datetime import datetime
from django.http import HttpResponse, Http404
from django.shortcuts import redirect, render
from seghca.models import Article


from django.shortcuts import render_to_response
from django.http import HttpResponse
from django.template import RequestContext
from django.views.decorators.csrf import csrf_exempt
import json

def home2(request):
    return render_to_response('seghca/form.html', context_instance=RequestContext(request))

@csrf_exempt
def test_post(request):
    data = {'html': request.POST['key']}
    return HttpResponse(json.dumps(data), mimetype="application/json")

possible duplicate of Django Ajax-Jquery does not fetch the data — Hieu Nguyen
– Hieu Nguyen, Commented Aug 24, 2013 at 11:41

Aamir Rind · Accepted Answer · 2013-08-24 11:45:52Z

1

When you are using ajax view you should return the data back from your view in the json form:

data = {'html': request.POST['input']}
return HttpResponse(json.dumps(data), mimetype="application/json")

Second it is necessary to parse the response first on client side:

success: function(response){
    var json_response = JSON.parse(response);
    // now get the variables from the json_response
    $('#result').html(json_response.html);
}

Third if you need to pass the form data along with some more info you can do:

var data = $(this).serializeArray();
data.push({
    key:   "keyName",
    value: "the value"
});

Fourth you are missing csrf token.

answered Aug 24, 2013 at 11:45

Aamir Rind

39.8k24 gold badges131 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1731699 Over a year ago

I edited my code with your correction, however, it does not solve the problem, views.py does not received anything! It seems django does not want to get get json...

Aamir Rind Over a year ago

Please make sure you are passing csrf token also in post data.

user1731699 Over a year ago

I edited with the decorator (it that correct?), but it still does not work.

user1731699 Over a year ago

Ok after several test, I found that from client to server everything works I can get a customize dictionnary. However from server to client json does not work at all, if I remove json it works but with json I have got nothing.

ryuusenshi · Accepted Answer · 2013-11-20 09:00:55Z

0

change data: data, to data: {'data': JSON.stringify(data)},

and you'll be able to access the serialized version of your data via POST['data'] in django. Keep in mind that if you want to use this in django you have to deserialize it, for instance json.loads(POST['data'])

answered Nov 20, 2013 at 9:00

ryuusenshi

1,98613 silver badges15 bronze badges

Comments

manuelpgs · Accepted Answer · 2014-01-20 12:11:18Z

I have your same needs. My solution was:

The AJAX request:

    var posturl = $('#'+formid).prop('action');

$.ajax({
        async:false,
        type: "POST",
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        url : posturl,
        data : $('#'+formid).serialize() + '&mode=ajax', //&mode=ajax is my custom data
        success:function(response){             

                console.log(response);
                        alert(response.message);

        },
        timeout:10000
});

In the views.py:

        data = {'error': '0', 'message': 'all was ok'}
        return HttpResponse(json.dumps(data), mimetype="application/json")

The above should work for you. My test was with Django 1.6 and Python 2.7.5

Collectives™ on Stack Overflow

Json does not work in Django with Ajax

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related