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

每次从服务器端解码字典的努力要少得多。

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

2 个答案: