Wie json serialize Daten von einem Formular zu Ajax mit Django senden

Question

Derzeit sende ich die Daten über Code auf diese Weise und es funktioniert, aber wie kann ich das gesamte Formular in JSON senden?

Code:

$.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 

Ich will alles senden und abrufen csrfmiddlewaretoken mit Formulardaten json einschließlich.

Ich habe etwas Ähnliches wie das versucht:

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 

Aber dies aus irgendeinem Grund nicht funktioniert. Wie kann ich es zur Arbeit bringen?

Answer 1

Sie müssen JSIS serialisierte Formulardaten als einen parameter und csrf-Token als einen anderen Parameter senden, da jede POST-Anfrage ein csrf-Token darin erwartet.

Auf Serverseite in Ihrer Sicht müssen Sie die Daten deserialisieren.

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

Sie können die Formulardaten mit serializeArray Funktion in jQuery greifen, dann ist es in Wörterbuch konvertieren und als Post-Daten senden.

Die serializeArray Funktion Ausgang wäre so etwas wie,

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

Dann würden Sie es auf das Wörterbuch oder JSON-Format konvertieren. Schreiben Sie eine globale Funktion für das,

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

Nennen Sie es, wenn Sie die Formulardaten greifen müssen,

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

Es wäre viel weniger Aufwand als mit dem Wörterbuch jedes Mal von der Serverseite zu dekodieren .