溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

簡(jiǎn)單了解Ajax表單序列化的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-10-17 07:57:25 來(lái)源：腳本之家 閱讀：146 作者：夏至未至~ 欄目：web開(kāi)發(fā)

原生表單序列化

隨著Ajax的出現(xiàn)，表單序列化已經(jīng)成為一種需求,在學(xué)習(xí)原生Ajax時(shí),若用POST方法向后臺(tái)提交數(shù)據(jù)時(shí),就需要將表單序列化

在JavaScript中可以利用表單字段的type屬性,連同name和value屬性,一起實(shí)現(xiàn)表單的序列化。

在進(jìn)行表單序列化之前,需要弄清楚在表單提交期間，瀏覽器是怎樣將數(shù)據(jù)發(fā)送給服務(wù)器的。

  • --對(duì)表單字段的名稱和值進(jìn)行URL編碼，使用和號(hào)(&)分隔
  • --不發(fā)送禁用的表單字段
  • --只發(fā)送勾選的復(fù)選框和單選按鈕
  • --不發(fā)送type為"reset"和"button"的按鈕
  • --多選選擇框中的每個(gè)選中的值單獨(dú)一個(gè)條目
  • --在單擊提交按鈕提交表單的情況下,也會(huì)發(fā)送提交按鈕，否則不發(fā)送提交按鈕
  • --<select>元素的值，就是選中的<option>元素的value特性的值。如果<option>元素沒(méi)有value屬性，則就是<option>元素的文本值

實(shí)現(xiàn)表單序列化的函數(shù)為：

function serialize(form){
var parts=[],
field=null,
i,
len,
j,
optLen,
option,
optValue;
for (i = 0; i < form.elements.length; i++) {
field=form.elements[i];
switch (field.type) {
case 'select-one':
case 'select-multiple':
if(field.name.length){
for (var j = 0; j < field.options.length; j++) {
option=field.options[j];
if (option.selected) {
optValue="";
if (option.hasAttribute) {
optValue=(option.hasAttribute('value') ? option.value : option.text);
}else{
optValue=(option.attribute['value'].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": //文本輸入
case "submit": //提交按鈕
case "reset": //重置按鈕
case "button": //自定義按鈕
break;
case "radio": //單選按鈕
case "checkbox": //復(fù)選框
if (!field.checked) {
break;
}
//執(zhí)行默認(rèn)操作
default:
//不包含沒(méi)有名字的表單字段
if(field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手