用HTML5 FormData輕松完成Ajax表單提交
在我們的日常開(kāi)發(fā)中,經(jīng)常都會(huì)用到Ajax來(lái)提交表單。讓我們來(lái)看一個(gè)典型的例子:
<form id="myform" action="webservice.php" method="post">
<input type="email" name="email" />
<select name="job">
<option value="">角色</option>
<option>web開(kāi)發(fā)者</option>
<option>IT工程師</option>
<option>其他</option>
</select>
<input type="checkbox" name="freelancer" /> 你是自由職業(yè)嗎?
<input type="radio" name="experience" value="4" /> 不到5年經(jīng)驗(yàn)
<input type="radio" name="experience" value="5" /> 5年及以上經(jīng)驗(yàn)
<textarea name="comments" rows="3" cols="60"></textarea>
<button type="submit">Submit</button>
<form>
如果我們使用jQuery來(lái)提交這個(gè)表單的話(huà),我們會(huì)像下面這樣來(lái)提提交表單:
$("myform").on("submit", function(e) {
e.preventDefault();
$.post(this.action, $(this).serialize());
});
如果我們用原生的JavaScript來(lái)提交表單的話(huà),我們需要通過(guò)遍歷表單中的表單元素來(lái)獲取相關(guān)的數(shù)據(jù),如下:
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);
}
現(xiàn)代Web應(yīng)用中頻繁使用的一項(xiàng)功能就是表單數(shù)據(jù) 的序列化,XMLHttpRequest 2級(jí)為此定義了FormData類(lèi)型。FormData為序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)(用于通過(guò)XHR傳輸)提供了便利。下面的我們看看,通 過(guò)FormData對(duì)象,如何提交這個(gè)表單:
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);
}
看看,是不是簡(jiǎn)單多了。同時(shí),這也比jQuery更快、更容易閱讀。
使用FormData的方便之處體現(xiàn)在不必明確地在XHR對(duì)象上設(shè)置請(qǐng)求頭部。XHR對(duì)象能夠識(shí)別傳入的數(shù)據(jù)類(lèi)型是FormData的實(shí)例,并配置適當(dāng)?shù)念^部信息。
如果沒(méi)有表單元素傳遞給構(gòu)造函數(shù),下面的代碼創(chuàng)建了一個(gè)FormData對(duì)象,并向其中添加了一些數(shù)據(jù)。這個(gè)append()方法接收兩個(gè)參數(shù):鍵和值,分別對(duì)應(yīng)表單字段的名字和字段中包含的值。可以像這樣添加任意多個(gè)鍵值對(duì)兒。
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。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
標(biāo)題名稱(chēng):使用HTML5FormData輕便完成Ajax表單提交
URL鏈接:http://m.newbst.com/news26/314076.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、微信小程序、定制網(wǎng)站、網(wǎng)站改版、電子商務(wù)、品牌網(wǎng)站制作
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)