使用 FormData api 提交部分表单数据

Question

使用 Ajax 可以发送表单的部分数据，使用下面的数据作为 ajax-

的数据

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

对 FormData 进行同样的尝试 api -

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 对象确实有一个 .append method 可以将新值添加到对象中。你可以用它来做

var formData = new FormData();
$('form#CreateForm #form-section-1').find('input, textarea, select').each(function () {
        if($(this).is(':input:file')) {
            formData.append(this.name, $(this)[0].files[0]);
        } else {
            formData.append(this.name, $(this).val());
        }
});

仅供参考 :input 是 shorthand 对于 input|select|textarea|button。

使用 FormData api 提交部分表单数据

partial form data submission with FormData api

ajax

jquery

form-data