formdata ajax_使用HTML5 FormData界面更轻松的Ajax

formdata ajax

如果您正在开发单页应用程序或正在练习渐进式增强技术，则通常需要拦截表单提交并将其转换为Ajax调用。 让我们看一个典型的形式：

<form id="myform" action="webservice.php" method="post">

<input type="email" name="email" />

<select name="job">
<option value="">role</option>
<option>web developer</option>
<option>IT professional</option>
<option>other</option>
</select>

<input type="checkbox" name="freelancer" /> are you a freelancer?

<input type="radio" name="experience" value="4" /> less than 5 year's experience
<input type="radio" name="experience" value="5" /> 5 or more year's experience

<textarea name="comments" rows="3" cols="60"></textarea>

<button type="submit">Submit</button>

</form>

表单拦截在jQuery中很简单，因为您可以将表单节点传递给serialize方法以提取所有字段数据，例如

$("myform").on("submit", function(e) {
	e.preventDefault();
	$.post(this.action, $(this).serialize());
});

如果您使用的是原始JavaScript，则需要自己实现类似的功能。 您可以手动一个接一个地获取每个字段，也可以实现一个通用的表单元素数据提取循环：

document.getElementById("myform").onsubmit = function(e) {

	e.preventDefault();
	
	var f = e.target,
		formData = '',
		xhr = new XMLHttpRequest();
	
	// fetch form values
	for (var i = 0, d, v; i < f.elements.length; i++) {
		d = f.elements[i];
		if (d.name && d.value) {
			v = (d.type == "checkbox" || d.type == "radio" ? (d.checked ? d.value : '') : d.value);
			if (v) formData += d.name + "=" + escape(v) + "&";
		}
	}
	
	xhr.open("POST", f.action);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	xhr.send(formData);

}

即使您在可重用的函数中定义了代码，这也是相当数量的代码。 如果您已禁用字段或将其设置为只读，则可能还需要进行其他检查。

幸运的是，鲜为人知的FormData接口已添加到XMLHttpRequest2中，该接口为您处理了许多艰苦的工作。 让我们重新编写我们JavaScript提交处理程序以使用它：

document.getElementById("myform").onsubmit = function(e) {

	e.preventDefault();
	
	var f = e.target,
		formData = new FormData(f),
		xhr = new XMLHttpRequest();
	
	xhr.open("POST", f.action);
	xhr.send(formData);
}

这要简单得多，而且比jQuery替代品更快，更容易阅读。

可以将FormData构造函数传递给表单元素节点； 这指示它检索和编码所有字段名称/值对。 您还将注意到，由于数据的发送格式与表单的xhr.setRequestHeader("Content-Type") submit()方法中定义的格式相同，因此我们无需显式设置xhr.setRequestHeader("Content-Type") 。 还使用了multipart/form-data的编码，因此您可以上传文件。

如果没有表单元素传递给构造函数，则会创建一个空的FormData对象。 无论采用哪种初始化方式，都可以使用append方法附加其他名称/值对，例如

var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);

如果值为File或Blob，则第三个参数可以指定可选的文件名。

所有现代浏览器都支持FormData 。 仅IE9及以下版本会引起麻烦，但是，如果您支持IE的较早版本，则可能会使用jQuery或另一个实现其自己的字段数据提取方法的库。

有关更多信息，请参考FormData参考和在MDN上使用FormData对象 。

翻译自: https://www.sitepoint.com/easier-ajax-html5-formdata-interface/

formdata ajax