建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯網營銷解決方案
簡單了解Ajax表單序列化的實現方法-創(chuàng)新互聯
原生表單序列化
隨著Ajax的出現，表單序列化已經成為一種需求,在學習原生Ajax時,若用POST方法向后臺提交數據時,就需要將表單序列化
在JavaScript中可以利用表單字段的type屬性,連同name和value屬性,一起實現表單的序列化。
在進行表單序列化之前,需要弄清楚在表單提交期間，瀏覽器是怎樣將數據發(fā)送給服務器的。
- --對表單字段的名稱和值進行URL編碼，使用和號(&)分隔
- --不發(fā)送禁用的表單字段
- --只發(fā)送勾選的復選框和單選按鈕
- --不發(fā)送type為"reset"和"button"的按鈕
- --多選選擇框中的每個選中的值單獨一個條目
- --在單擊提交按鈕提交表單的情況下,也會發(fā)送提交按鈕，否則不發(fā)送提交按鈕
- --
實現表單序列化的函數為：
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": //復選框
if (!field.checked) {
break;
}
//執(zhí)行默認操作
default:
//不包含沒有名字的表單字段
if(field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
文章名稱：簡單了解Ajax表單序列化的實現方法-創(chuàng)新互聯
URL分享：http://www.dlmjj.cn/article/dppjsd.html
