用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基本常識，總能影響你的優化計策