如何使用 django 将 json 序列化数据从表单发送到 ajax答案

【问题标题】：How to send json serialize data from a form to ajax using django如何使用 django 将 json 序列化数据从表单发送到 ajax
【发布时间】：2017-06-11 07:49:03
【问题描述】：

目前，我正在以这种方式通过代码发送数据并且它正在工作，但我怎样才能以 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

但是，由于某种原因，这不起作用。我怎样才能让它工作？

【问题讨论】：

标签： ajax django

【解决方案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

【讨论】：

【解决方案2】：

您可以使用jQuery中的serializeArray函数获取表单数据，然后将其转换为字典并作为post数据发送。

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

这比每次都从服务器端解码字典要少得多。

【讨论】：