403 Verbotener Fehler beim Erstellen einer Ajax-Post-Anfrage im Django-Framework

Ich versuche, jquery in eine Webanwendung zu integrieren, die ich mit dem Django-Framework erstelle. Es fällt mir jedoch schwer, ein einfaches zu machenajax zur Arbeit rufen. Meine Vorlagendatei, die die Form HTML und Javascript enthält, um den Ajax-Aufruf zu verarbeiten, sieht folgendermaßen aus:

<script type="text/javascript">
$(document).ready(function() {
$( "#target" ).submit(function() {
console.log('Form was submitted');
$.ajax({
        type: "POST",
        url: "/hello/",  // or just url: "/my-url/path/"
        data: {
            query: $( "#query" ).val()   
        },
        success: function(data) {
            console.log(data);
        }
    });
return false;
  });   
  })
</script>
<form id="target" action="." method="post">{% csrf_token %}
 <input id= "query" type="text" value="Hello there">
 <input type="submit" value="Search Recent Tweets">
</form>

Meineviews.py das soll den Ajax-Aufruf behandeln sieht so aus:

 from django.core.context_processors import csrf
 from django.shortcuts import render_to_response
 from django.template.loader import get_template
 from django.template import Context,RequestContext
 from django.views.decorators.csrf import ensure_csrf_cookie
 from django.http import HttpResponse

 # access resource
 def hello(request):
  c = {}
  c.update(csrf(request))
  if request.is_ajax():
        t = get_template('template.html')
        #html = t.render(Context({'result': 'hello world'}))
        con = RequestContext(request, {'result': 'hello world'})
        return render_to_response('template.html', c, con)
  else:
        return HttpResponse('Not working!') 

Ich habe versucht, der offiziellen Dokumentation zu folgenSchutz vor Cross-Site Request Forgery und befasste sich auch mit mehreren Stackoverflow-Fragen, die sich mit einem ähnlichen Problem befassten. Ich habe die eingeschlossen{% csrf_token %} in meinemhtml Template-Datei, aber es scheint immer noch nicht zu funktionieren. In der Konsole wird eine Fehlermeldung angezeigt, die darauf hinweist, dass der Ajax-Aufruf fehlgeschlagen ist:

POST http://127.0.0.1:8000/hello/ 403 (FORBIDDEN)   

Wie komme ich am. Vorbei?result Variable zusammen mit meiner http-Antwort und bekommen den Ajax-Aufruf reibungslos funktionieren? Jede Hilfe wird sehr geschätzt.

Bearbeiten-1

Ich habe die angeblich nicht bestandencsrf Token zusammen mit meiner Post-Anfrage. SO gemäß der Dokumentation habe ich den folgenden Code zu meiner Vorlage Javascript hinzugefügt:

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = jQuery.trim(cookies[i]);
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) == (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
        }
    }
}
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');
console.log(csrftoken);

//Ajax call
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    crossDomain: false, // obviates need for sameOrigin test
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

Wenn ich die HTML-Seite der Vorlage im Browser aktualisiere, erhalte ichnull in der Konsole, was darauf hindeutet, dass das Cookie nicht gesetzt oder nicht definiert ist. Was vermisse ich?

Antworten auf die Frage(9)

Ihre Antwort auf die Frage