Come utilizzare {% csrf_token%} in javascript

Question

Nella mia pagina utenti, ho installato il montaggio con ajax. E quando clicco su modifica, funziona bene. Ma quando invio il modulo, non fa nulla. Quando ho controllato, questo è l'errore:

CSRF verification failed. Request aborted.

Allora, come faccio a piazzare {% csrf_token%} nel mio javascript? Per favore consiglio Grazie.

edit.js:

function bookmark_edit() { 
    var item = $(this).parent(); 
    var url = item.find(".title").attr("href"); 
    item.load("/save/?ajax&url=" + escape(url), null, function() { 
     $("#save-form").submit(bookmark_save); 
     }); 
    return false; 
    } 

$(document).ready(function() { 
    $("ul.bookmarks .edit").click(bookmark_edit); 
    }); 

function bookmark_save() { 
    var item = $(this).parent(); 
    var data = { 
     url: item.find("#id_url").val(), 
     title: item.find("#id_title").val(), 
     tags: item.find("#id_tags").val() 
     }; 
    $.post("/save/?ajax", data, function (result) { 
     if (result != "failure") { 
     item.before($("li", result).get(0)); 
     item.remove(); 
     $("ul.bookmarks .edit").click(bookmark_edit); 
     } 
     else { 
      alert("Failed to validate bookmark before saving."); 
     } 
     }) 
     return false; 
    } 

save_form.html:

<form id = "save-form" method="post" action="/save/"> 
{% csrf_token %} 
    {{form.as_p}} 
    <input type="submit" value="Save" /> 
</form> 

user_page.html:

{% extends "base.html" %} 
{% block external %} 
    <script type = "text/javascript" src="{% static "assets/js/bookmark_edit.js" %}"></script> 
{% endblock %} 
{% block title %} {{username}} {% endblock %} 
{% block head %} Bookmarks for {{username}} {% endblock %} 
{% block content %} 
    {% include "bookmark_list.html" %} 
{% endblock %} 

view.py:

@login_required(login_url='/login/') 
def bookmark_save_page(request): 
    ajax = request.GET.has_key('ajax') 
    if request.method == 'POST': 
     form = BookmarkSaveForm(request.POST) 
     if form.is_valid(): 
      bookmark = _bookmark_save(request, form) 
      if ajax: 
       variables = RequestContext(request, { 
        'bookmarks':[bookmark], 
        'show_edit':True, 
        'show_tags':True 
        }) 
       return render_to_response('bookmark_list.html', variables) 
      else: 
       return HttpResponseRedirect('/user/%s/' % request.user.username 
        ) 
     else: 
      if ajax: 
       return HttpResponseRedirect('failure') 
    elif request.GET.has_key('url'): 
     url = request.GET['url'] 
     title = '' 
     tags = '' 

     try: 
      link = Link.objects.get(url=url) 
      bookmark = Bookmark.objects.get(
       link=link, 
       user = request.user 
       ) 
      title = bookmark.title 
      tags = ' '.join(
       tag.name for tag in bookmark.tag_set.all() 
       ) 
     except ObjectDoesNotExist: 
      pass 
     form = BookmarkSaveForm({ 
      'url':url, 
      'title':title, 
      'tags':tags 
      }) 
    else: 
     form = BookmarkSaveForm() 

    variables = RequestContext(request, { 
     'form': form 
     }) 
    if ajax: 
     return render_to_response(
      'bookmark_save_form.html', 
      variables 
      ) 
    else: 
     return render_to_response('bookmark_save.html',variables) 

Answer 1

Non si sta inviando il csrf_token generato dal server per il POST per verificare la validità dei dati. Quindi l'errore.

Come parte della data parte della richiesta, è necessario inviare il token

csrfmiddlewaretoken: '{{ csrf_token }}' 

Qualcosa di simile

var data = { 
    url: item.find("#id_url").val(), 
    title: item.find("#id_title").val(), 
    tags: item.find("#id_tags").val(), 
    csrfmiddlewaretoken: '{{ csrf_token }}' 
}; 

o si può semplicemente fare:

var data = $('form').serialize() 

se si desidera inviare l'intero modulo come dizionario

Answer 2

Questo è quello che uso. Non sono sicuro se sia applicabile nella tua situazione però.

// sending a csrftoken with every ajax request 
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", $.cookie('csrftoken')); 
     } 
    } 
});