用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。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

標題名稱：使用HTML5FormData輕便完成Ajax表單提交
URL鏈接：http://m.2m8n56k.cn/news26/314076.html

成都網站建設公司_創新互聯，為您提供ChatGPT、微信小程序、定制網站、網站改版、電子商務、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯