如何使用Django將JSON序列化數據從表單發送到Ajax

Question

目前，我正在以這種方式通過代碼發送數據，並且可以正常工作，但是如何在json中發送整個表單呢？

代碼：

 $.ajax({
         url : window.location.href, // the endpoint,commonly same url
         type : "POST", // http method
         data : { csrfmiddlewaretoken : csrftoken,
         email : email,
         password : password,
         username : username,
         dob : dob,
 }, // data sent with the post request

我想使用formdata json發送和檢索包括csrfmiddlewaretoken在內的所有內容。

我已經嘗試過類似的方法：

    var formData = new FormData($('#my_form');
    formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

 $.ajax({
         url : window.location.href, // the endpoint,commonly same url
         type : "POST", // http method
         data : formData, // data sent with the post request

但是，由於某些原因，這不起作用。 我如何使它工作？

Answer 1

您需要將json序列化表單數據作為一個參數發送，將csrf令牌作為另一個參數發送，因為每個POST請求都希望在其中包含一個csrf令牌。

    csrfmiddlewaretoken = $("#add_member_Form").find("input[name='csrfmiddlewaretoken']" ).val();
    formData = $('#add_member_Form').serializeArray();
    formData = JSON.stringify(formData);
    $.ajax({
        url : url,
        data : {
            "csrfmiddlewaretoken" : csrfmiddlewaretoken,
            "formData" : formData
        },
        method: "POST",
        dataType : "json",

在服務器端，您需要反序列化數據。

form_data_dict = {}
form_data_list = json.loads(form_data)
for field in form_data_list:
    form_data_dict[field["name"]] = field["value"]
return form_data_dict

Answer 2

您可以使用jQuery中的serializeArray函數獲取表單數據，然后將其轉換為字典並作為發布數據發送。

serializeArray函數的輸出類似於

{ 
    'name': 'the_name',
    'value': 'the_value'
}

然后，您將不得不將其轉換為字典或json格式。 為此編寫一個全局函數，

function objectifyForm(formArray) {
    var returnArray = {};
    for (var i=0;i<formArray.length;i++) {
        if (formArray[i].value) {
            returnArray[formArray[i].name] = formArray[i].value;
        }
    }
    return returnArray;
}

每當需要獲取表單數據時都調用它，

var formData = $('#my_form').serializeArray();
formData = objectifyForm(formData);
$.ajax({ 
        url : window.location.href, // the endpoint,commonly same url 
        type : "POST", // http method
        data : formData, 
        success: blaah,
        error: bleeh,
    });

與每次必須從服務器端解碼字典相比，所需的工作量要少得多。