AJAX：將form.serialize（）和csrf標記放在一起？

有人可以說這條通道有什麼問題data:...裏面saveForm功能？AJAX：將form.serialize（）和csrf標記放在一起？

我有我的網頁上的任務列表。每個任務都有自己的表單，用戶可以發送評論。這意味着我在一個頁面中有幾種形式。當我添加新的任務AJAX更新評論列表，然後我嘗試發送評論的形式之一，它會引發錯誤：「CSRF token missing or incorrect」。我的所有表格中都有{% csrf_token %}。

看來我需要在AJAX中發送CSRF。我哪裏錯了？

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

來源

2017-04-19 Nurzhan Nogerbek

.append用於DOM元素。 .serialize的結果是一個字符串。你爲什麼不把標記放在隱藏的輸入中，名字爲'csrfmiddlewaretoken'的屬性？這將使用表單數據的其餘部分對其進行序列化。

來源

2017-04-19 08:31:31 Chase

我在視圖中添加'context.update（csrf（request））'，並且'CSRF token missing或incorrect'錯誤消失。但是，當我嘗試向AJAX列表更新的任務添加評論時，我仍然遇到問題。在正常的郵寄評論表單中工作得很好，但當我嘗試通過發佈的郵件中的某個表單發送評論時，他們不工作。我更新與視圖和JS代碼我的帖子你如何看待爲什麼這樣的事情happan？ –

您的表單正在動態創建？ – Thameem

這裏就是我這樣做，工作了AJAX的形式使用Django：

$('#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()代替連載。

.serializeArray()給你的對象一個這樣的數組：

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

調用$.param(serilaized_array_data)把它變成提交的字符串。所以關鍵是將csrf標記添加到數組中。在上面的代碼中，我在from_array.push({...的行上用*表示註釋。

來源

2018-01-30 02:54:34

AJAX：將form.serialize（）和csrf標記放在一起？

回答

相關問題