AJAX：form.serialize（）とcsrfトークンを一緒に使用しますか？

Question

誰かがこの車線に何が間違っていると言うことができますdata:...内部saveForm機能？

私のページにはタスクのリストがあります。すべてのタスクには、ユーザーがコメントを送信できる独自のフォームがあります。つまり、私は1つのページに複数のフォームがあることを意味します。コメントの新しいタスクAJAX更新リストを追加して、フォームの1つでコメントを送信しようとすると、エラー：“CSRF token missing or incorrect”が発生します。私は{% csrf_token %}を私のすべてのフォームに持っています。

AJAXでCSRFを送信する必要があるようです。私は間違っていた？コメント追加ABOUT

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'); 

function csrfSafeMethod(method) { 
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
} 

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
      xhr.setRequestHeader("X-CSRFToken", csrftoken); 
     } 
    } 
}); 

// TASK 
$(function() { 
    var loadForm = function() { 
     var btn = $(this); 
     $.ajax({ 
      url: btn.attr("data-url"), 
      type: 'get', 
      dataType: 'json', 
      beforeSend: function() { 
       $("#modal").modal("show"); 
      }, 
      success: function (data) { 
       $("#modal .modal-content").html(data.html_group_task_form); 
      } 
     }); 
    }; 

    var saveForm = function() { 
     var form = $(this); 
     $.ajax({ 
      url: form.attr("action"), 
      data: form.serialize().append('csrfmiddlewaretoken', getCookie(csrftoken)), 
      type: form.attr("method"), 
      dataType: 'json', 
      success: function (data) { 
       if (data.form_is_valid) { 
        $("#task-list").html(data.html_task); 
        $("#modal").modal("hide"); 
       } 
       else { 
        $("#modal .modal-content").html(data.html_task_form); 
       } 
      } 
     }); 
     return false; 
    }; 
    // Create task 
    $("#task-add-button").click(loadForm); 
    $("#modal").on("submit", ".js-task-add-form", saveForm); 
    // Update task 
    $("#task-list").on("click", "#js-edit-task-button", loadForm); 
    $("#modal").on("submit", ".js-task-edit-form", saveForm); 
}); 


//TASK COMMENT ADD 
$(".task-comment-form").submit(function(event) { 
    event.preventDefault(); 
    console.log(event.preventDefault()); 
    var form = $(this); 
    $.ajax({ 
     url: form.attr("action"), 
     data: form.serialize().append('csrfmiddlewaretoken', getCookie(csrftoken)), 
     type: form.attr("method"), 
     dataType: 'json', 
     success: function (data) { 
      var current_group = form.closest('.custom-list-group'); 
      if (data.form_is_valid) { 
       current_group.find(".task-comments").html(data.html_task_comment); 
      } 
      else { 
       current_group.find(".task-comment-form").html(data.html_task_comment_form); 
      } 
     }, 
    }); 
    form[0].reset(); 
    return false; 
}); 

CODE：

views.py：

def task_comment_add(request, project_code, task_code): 
    data = dict() 
    project = get_object_or_404(Project, pk=project_code) 
    task = get_object_or_404(Task, pk=task_code) 
    if request.method == 'POST': 
     form = CommentForm(request.POST) 
     if form.is_valid(): 
      comment = form.save(commit=False) 
      comment.author = request.user 
      comment.save() 
      task.comments.add(comment) 
      data['form_is_valid'] = True 
      data['html_task_comment'] = render_to_string('project/task_comment_list.html' {'task': group_task}) 
     else: 
      data['form_is_valid'] = False 
    else: 
     form = CommentForm() 
    context = {'project': project, 'task': task, 'form': form} 
    data['html_task_comment_form'] = render_to_string('project/task_comment_form.html', context, request=request) 
    return JsonResponse(data) 

JS：

// TASK COMMENT ADD 
$(".task-comment-form").submit(function(event) { 
    event.preventDefault(); 
    console.log(event.preventDefault()); 
    var form = $(this); 
    $.ajax({ 
     url: form.attr("action"), 
     data: form.serialize(), 
     type: form.attr("method"), 
     dataType: 'json', 
     success: function (data) { 
      var current_group = form.closest('.custom-list-group'); 
      if (data.form_is_valid) { 
       current_group.find(".task-comments").html(data.html_task_comment); 
      } 
      else { 
       current_group.find(".task-comment-form").html(data.html_task_comment_form); 
      } 
     } 
    }); 
    form[0].reset(); 
    return false; 
}); 

Answer 1

.appendはDOM要素用です。 .serializeの結果は文字列です。 'csrfmiddlewaretoken'の 'name'属性を持つフォームの非表示入力にトークンを入れないのはなぜですか？ これは残りのフォームデータとシリアル化します。

$('#ajax_form').submit(function(e){ 
     e.preventDefault(); 
     var form = this; 
     var action = $(form).attr('action'); // grab the action as url 
     var form_array = $(form).serializeArray(); // use serializeArray 
     form_array.push({ // *expand the array to include a csrf token* 
     name: 'csrfmiddlewaretoken', 
     value: getCookie('csrftoken') // getCookie function from django docs 
     }); 
     var form_data = $.param(form_array); // set it up for submission 
     $.post(action,form_data,function(resp){ 
     // do stuff after receiving resp 
     }); 
    }); 

基本的に、私はjQueryの.serializeArray()代わりにシリアル化の使用：

Answer 2

は、ここで私はジャンゴとAJAXフォームのために働いていることをやったことです。

.serializeArray()はあなたにこのようなオブジェクトの配列を与える：$.param(serilaized_array_data)を呼び出す

[{name:'name1',value:'value1'},{name:'name2',value:'value2'}] 

は提出するための文字列に変換します。したがって、キーはcsrfトークンを配列に追加することです。私は、上記のコードで、コメントに*のあるfrom_array.push({...という行を付けました。