使用HTML5FormData轻便完成Ajax表单提交

用html5 formdata轻松完成ajax表单提交 在我们的日常开发中，经常都会用到ajax来提交表单。让我们来看一个典型的例子: <form id=myform action=webservice.php method=post> <input type=email name=email /> <select name=job> <option value=>角色</option> <option>web开发者</option> <option>it工程师</option> <option>其他</option> </select> <input type=checkbox name=freelancer /> 你是自由职业吗？ <input type=radio name=experience value=4 /> 不到5年经验 <input type=radio name=experience value=5 /> 5年及以上经验 <textarea name=comments rows=3 cols=60></textarea> <button type=submit>submit</button> <form>
如果我们使用jquery来提交这个表单的话，我们会像下面这样来提提交表单：
$(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); }
现代web应用中频繁使用的一项功能就是表单数据 的序列化，xmlhttprequest 2级为此定义了formdata类型。formdata为序列化表单以及创建与表单格式相同的数据（用于通过xhr传输）提供了便利。下面的我们看看，通 过formdata对象，如何提交这个表单： 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对象上设置请求头部。xhr对象能够识别传入的数据类型是formdata的实例，并配置适当的头部信息。 如果没有表单元素传递给构造函数,下面的代码创建了一个formdata对象，并向其中添加了一些数据。这个append()方法接收两个参数：键和值，分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。 var formdata = new formdata(); formdata.append(name, value); formdata.append(a, 1); formdata.append(b, 2);
支持formdata的浏览器有firefox 4+、safari 5+、chrome和android 3+版webkit。


以小见大、由浅入深-谈如何面试Javascript工程师
浦东一个合格高效的SEO习惯是怎么养成的？
贺州网站优化：seo快排原理的来龙去脉
内容网站如何做权重?
制作一个好的网站对于企业意味着什么?
企业网站建设该如何找好的服务商
有哪些SEO服务观念是错误的？
东营SEO万变不离个中的seo基本常识，总能影响你的优化计策