Wie kann ich diesen Code-Block für das Anhängen von Daten an das Objekt umgestalten

Question

Ich habe ein FormData-Objekt erstellt und Elemente mit den folgenden Codezeilen daran angehängt. Es funktioniert gut für mich, aber ich möchte wissen, ob es einen überarbeiteten Weg gibt, dies zu tun.

var form_data = new FormData(); 

//Append the data into the FormData object 
form_data.append('action', 'my_action'); 
form_data.append('username', $("[name=username]").val()); 
form_data.append('email', $("[name=email]").val()); 
form_data.append('first_name', $("[name=first_name]").val()); 
form_data.append('last_name', $("[name=last_name]").val()); 
form_data.append('website', $("[name=website]").val()); 
form_data.append('password', $("[name=password]").val()); 

Ich sende diese Form_data in Ajax.

$.ajax({ 
    url: register_data.admin_url, 
    type: 'POST', 
    data: form_data, 
    processData: false, 
    contentType: false, 
    success: function(response) { 
     alert('Got this from the server: ' + response); 
    } 
}); 

Answer 1

Unter der Annahme, dass Sie die Werte aller Formulareingaben innerhalb des form-Tag in der Anfrage senden möchten, dann können Sie den Code, indem die Referenz des form zum FormData Konstruktor vereinfachen. Versuchen Sie folgendes:

$('#myForm').submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: register_data.admin_url, 
     type: 'POST', 
     data: new FormData(this), // < populates the FormData with all values in the form 
     processData: false, 
     contentType: false, 
     success: function(response) { 
      alert('Got this from the server: ' + response); 
     } 
    }); 
}); 

Answer 2

Sie können einfach das Formular übergeben an den Konstruktor von FormData zu retrieve data from HTML

HTML

<form name="foo"> 
    ... 
</form> 

JS

var form = document.forms.namedItem("foo"); 
form.addEventListener('submit', function(ev) { 
     var form_data = new FormData(form); 
}