隨著 Ajax 的出現(xiàn)，表單序列化已經(jīng)成為一種常見(jiàn)需求。在 JavaScript 中，可 以利用表單字段的 type 屬性，連同 name 和 value 屬性一起實(shí)現(xiàn)對(duì)表單的序列化。在編寫代碼之前， 有必須先搞清楚在表單提交期間，瀏覽器是怎樣將數(shù)據(jù)發(fā)送給服務(wù)器的。

​1. 對(duì)表單字段的名稱和值進(jìn)行 URL 編碼，使用和號(hào)（&）分隔。

2. 不發(fā)送禁用的表單字段。

3. 只發(fā)送勾選的復(fù)選框和單選按鈕。

4. 不發(fā)送 type 為"reset"和"button"的按鈕。

5. 多選選擇框中的每個(gè)選中的值單獨(dú)一個(gè)條目。

6. 在單擊提交按鈕提交表單的情況下，也會(huì)發(fā)送提交按鈕；否則，不發(fā)送提交按鈕。

7. <select>元素的值，就是選中的<option>元素的 value 特性的值。如果<option>元素沒(méi)有 value 特性，則是<option>元素的文本值。

在表單序列化過(guò)程中，一般不包含任何按鈕字段，因?yàn)榻Y(jié)果字符串很可能是通過(guò)其他方式提交的。除此之外的其他上述規(guī)則都應(yīng)該遵循。

基本的表單序列化可以通過(guò)遍歷表單元素實(shí)現(xiàn)，實(shí)例代碼如下：

function serialize(form){
 var params = [];
 var eles = form.elements;
 
 for (var i = 0;i<ele.length;i++){
  let field = ele[i];
  switch(field.type){
   case "file": 
   case "submit":
   case "reset": 
   case "button":
    break;
   case "radio":
   case "checkbox":
    if(!field.checked){
     break;
    }
    default:
     //不包含沒(méi)有名字的表單字段 
     if (field.name.length){ 
      parts.push(encodeURIComponent(field.name) + "=" + 
      encodeURIComponent(field.value)); 
     }
  }
 }
  return parts.join("&");
}

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