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

すべてのPOSTリクエストでcsrfトークンが必要なので、jsonシリアル化されたフォームデータを別のパラメータとして1つのパラメータと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関数の出力を使用すると、辞書やJSON形式に変換しなければならない、そして、

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

ようなものになるだろう。そのためのグローバル関数を書く、あなたがフォームデータを取得していたときに

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

、それを呼び出します。