表單序列化

時間 2019-12-05

標籤表單序列欄目 HTML 简体版

原文原文鏈接

1.serialize()

serialize()方法經過序列化表單值，建立URL編碼文本字符串。他的操做對象是表明表單元素集合的jquery對象,不過也能夠針對個別的表單元素進行序列化javascript

表單元素得幾種類型：<input> <textarea> <select>html

表單序列化：java

表單個別元素序列化jquery

serialize()序列化漢字會是亂碼數組

緣由：serialize()自動調用了encodeURIComponent()方法，將數據編碼了數據結構

解決辦法：調用decodeURIComponent()方法將數據解碼this

例如:編碼

<script type="text/javascript">
    $(document).ready(function(){
       $("#btnSubmit").click(function(){
          var serializeVal=$("#formDataSubmit").serialize();
          // 將序列化表單解碼
          serializeVal=decodeURIComponent(serializeVal,true);
          console.log("表單元素序列化輸出的值------------");
          console.log(serializeVal);
       });

    });
</script>

輸出結果截圖：spa

漢字再也不是亂碼了prototype

注意：使用序列化時，必須給要序列化的字段加上name屬性

2.serializeArray()

序列化後建立的是對象數組(名稱和值)，返回JSON數據結構

注意：此方法返回的是 JSON 對象而非 JSON 字符串。

返回的 JSON 對象是由一個對象數組組成的，其中每一個對象包含一個或兩個名值對 —— name 參數和 value 參數（若是 value 不爲空的話）。舉例來講：

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值爲空
]

注意：禁用的元素不會被序列化，文件選擇的元素也不會被序列化

序列化的代碼：

<script type="text/javascript">
    $(document).ready(function(){
        $("#btnSubmit").click(function(){
            //表單序列化數組
            var serializeVal=$("#formDataSubmit").serializeArray();
            console.log("表單元素序列化數組輸出的值------------");
            console.log(serializeVal);
         });
    });
</script>

序列化輸出的結果：

由上面代碼和效果圖能夠看到不須要編碼和解碼

遍歷輸出屬性和值能夠用如下方法

console.log("遍歷數組輸出的值------------");
$.each(serializeVal,function(i,file){
    console.log("name:"+file.name+",value:"+file.value);
})

效果圖以下：

3.serializeObj()

序列化後建立的是對象，jquery自己是沒有這個方法的，我本身封裝的一個

代碼以下：

$.prototype.serializeObj=function(){
    var arr=this.serializeArray();
    var obj={};
    $.each(arr,function(index,file){
        if(!(file.name in obj)){
           obj[file.name]=file.value;
        }
     });
    return obj;
}

效果圖以下：

注意：當序列化表單中出現多個相同的name時，serializeObj只會取到第一個name

單選按鈕時：相同的name，獲取的是checked的那個按鈕值

多選按鈕時：相同的name，獲取的是第一個的checked的那個按鈕值

代碼以下

<form id="formDataSubmit" name="formDataSubmit">
      <div>
         <label>姓名</label>
         <input type="text" name="userName" class="userName">
      </div>
      <div>
         <label>年齡</label>
         <input type="text" name="age">
      </div>
      <div>
         <label>職業</label>
         <input type="text" name="occupation">
      </div> 
      <div>
         <label>性別</label>
         <input type="radio" name="sex" id="sex" value="男">
         <label>男</label>
         <input type="radio" name="sex" id="sex" value="女">
         <label>女</label>
      </div> 
      <div>
         <label>愛好</label>
         <input type="checkbox" name="checkbox" value="游泳">
         <label>游泳</label>
         <input type="checkbox" name="checkbox"  value="拳擊">
         <label>拳擊</label>
         <input type="checkbox" name="checkbox"  value="打籃球">
         <label>打籃球</label>
         <input type="checkbox" name="checkbox"  value="踢足球">
         <label>踢足球</label>
      </div> 
   </form>

效果圖：

以一下代碼爲例來總結下三種形式的區別

<form id="formDataSubmit" name="formDataSubmit">
      <div>
         <label>姓名</label>
         <input type="text" name="userName" class="userName">
      </div>
      <div>
         <label>年齡</label>
         <input type="text" name="age">
      </div>
      <div>
         <label>職業</label>
         <input type="text" name="occupation">
      </div> 
      <div>
         <label>性別</label>
         <input type="radio" name="sex" id="sex" value="男">
         <label>男</label>
         <input type="radio" name="sex" id="sex" value="女">
         <label>女</label>
      </div> 
      <div>
         <label>愛好</label>
         <input type="checkbox" name="checkbox" value="游泳">
         <label>游泳</label>
         <input type="checkbox" name="checkbox"  value="拳擊">
         <label>拳擊</label>
         <input type="checkbox" name="checkbox"  value="打籃球">
         <label>打籃球</label>
         <input type="checkbox" name="checkbox"  value="踢足球">
         <label>踢足球</label>
      </div> 
   </form>

區別：