Django Ajax Post does not work properly

Question

Hello guys I'm trying to pass a variable from jquery to the views trying it returns in the DOM the value but it does not work for me.

I need a hand.

This is the html file.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">

$(function() {

$(document).on('submit', '#fomulario', function(e){
    e.preventDefault();

    $.ajax({
        type:'POST',
        url:'http://127.0.0.1:8000/form_ajax/',
        data:{ nombre:$('#nombre').val(), 
        'csrfmiddlewaretoken':'{% csrf_token %}',
                },
        sucess:function(data){
            $('#valor').html(data);

        }

    });

})  


});

</script>

</body>

<form id="fomulario"> {% csrf_token %}

<label for="Nombre">Nombre</label>
<input type="text" id="nombre">
<input type="submit">

</form>
<div id="valor"></div>



</html>

Views.

def form(request):
    return render_to_response('prueba2.html')


def form_ajax(request):
    if request.is_ajax() and request.method == 'POST':
        nombre = request.POST['nombre']
        HttpResponse(nombre)
        # message = "This is ajax"
    else:
        message = "Not ajax"
    return HttpResponse(message)

What am I doing bad ? Thank you guys.

And what happens when you run this code? "Not ajax" pops up in the response? — dahrens, Feb 01 '17 at 20:41
so what exactly is the problem? What is in `request.POST` etc. — yedpodtrzitko, Feb 01 '17 at 20:41
There is a `return` missing inside of the if block. Or you should do `message = nombre` — dahrens, Feb 01 '17 at 20:42
So, what is the error you get? You can check your console or terminal — hassan, Feb 01 '17 at 21:40
This is the error I got: UserWarning: A {% csrf_token %} was used in a template, but the context did not provide the value. This is usually caused by not using RequestContext. "A {% csrf_token %} was used in a template, but the context " [01/Feb/2017 21:48:30] "GET /form/ HTTP/1.1" 200 734 Forbidden (CSRF cookie not set.): /form_ajax/ [01/Feb/2017 21:49:06] "POST /form_ajax/ HTTP/1.1" 403 2857 / I even add the return as return HttpResponse(nombre) — El arquitecto, Feb 01 '17 at 21:50

score 0 · Answer 1 · answered Feb 03 '17 at 05:01

You are not properly passing the csrf token in the POST data. Your data should look like this:

data:{ 
    'nombre': $('#nombre').val(),
    'csrfmiddlewaretoken': $("input[name='csrfmiddlewaretoken']").val()
}

The problem is that {% csrf_token %} renders the whole input again, but you just need the value of the input that was rendered inside your form.

score 0 · Answer 2 · edited May 23 '17 at 12:33

I think the issue has to do with you not rendering your templates quite properly. Try re-rendering your templates using either of these two approaches.

1.

from django.shortcuts import render_to_response
from django.template import RequestContext

def form(request):
            return render_to_response('prueba2.html', context_instance=RequestContext(request)))

2.

from django.shortcuts import render
def form(request):
    return render('prueba2.html')

Kudos to https://stackoverflow.com/a/13048311/6599471.

Django Ajax Post does not work properly

2 Answers2