我该如何重构此代码块以将数据附加到对象

Question

我已经创建了一个FormData对象并使用以下代码行将元素附加到它。它适用于我，但我想知道是否有重构的方式来做到这一点。

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()); 

我在ajax发送这个form_data。

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

假设要在请求中的form标签内发送的所有形式输入值，则可以通过向FormData构造提供form的参考简化的代码。试试这个：

$('#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

您只需通过形式的FormData构造函数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); 
}