局部形式數據提交

Question

使用Ajax，可以使用以下發送的部分數據爲形式的數據ajax-

$("#CreateForm").find("#form-section-1").find('input, textarea, select').serialize() 

試圖用相同的API FORMDATA -

new FormData($('form#CreateForm')[0]) 

這確實但是不行 -

var formdata = new FormData($('form#CreateForm').find("#form-section-1").find('input, textarea, select')) 

由於下面循環沒有給出結果 -

for (var pair of formdata.entries()) { 
    console.log(pair[0]+ ', ' + pair[1]); 
} 

怎樣才能以緊湊的形式提交部分形式的數據與FormData API像序列化？

編輯： 在接受溶液中，我不得不進一步增加這一條件下特別是文件 -

if($(this).is(':input:file')) { 
formData.append(this.name, $(this)[0].files[0]); 
} else { 
formData.append(this.name, $(this).val()); 
} 

Answer 1

的FormData constructor接受可選天然<form/>元件參數來傳遞的所有數據的形式。請注意，

$('form#CreateForm') // jQuery object 
$('form#CreateForm')[0] // native form element 
$('form#CreateForm #form-section-1').find('input, textarea, select') // jQuery objects 
$('form#CreateForm #form-section-1').find('input, textarea, select')[0] // some native non-form element 

所以你不能真的使用構造函數。

FormData對象確實有一個​​將新值添加到對象中。你可以用它做

var formData = new FormData(); 
$('form#CreateForm #form-section-1').find('input, textarea, select').each(function() { 
    formData.append(this.name, $(this).val()); 
}); 

FYI :input是input|select|textarea|button簡寫。