jQuery serializeArray()

admin發表於2017-02-20
jQuery

此方法將提交的表單元素的值編譯成擁有name和value屬性物件組成的陣列。

可以序列化一個或者多個表單元素，甚至是form表單本身。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
.serializeArray()

引數解析:

不接收任何引數。

jQuery1.2版本新增。

返回值是擁有name和value屬性物件組成的陣列，例如:

[JavaScript] 純文字檢視 複製程式碼
[ 
  {name: 'user', value: '螞蟻部落'}, 
  {name: 'age', value: 2},
  {name: 'target'}
]

陣列中的最後一個物件就是value屬性值為空的時候。

特別說明:

（1）.只會將"成功控制元件"序列化，關於成功控制元件參閱successful controls控制元件一章節。

（2）.沒有name屬性不能夠被序列化。

（3）.核取方塊和單選按鈕的值只有在被選中時才會被序列化。

（4）.檔案選擇元素的資料也不會被序列化。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  var urlStr=$("input,select").serializeArray();
  $("#show").text(JSON.stringify(urlStr));
})
</script>
</head>
<body>
<div id="show"></div>
<form name="theform" id="theform">
  <ul>
    <li>姓名:<input type="text" name="user" value="螞蟻部落"/></li>
    <li>年齡:<input type="text" name="age" value="2"/></li>
    <li>課程:<select name="source">
              <option value="css">css教程</option>
              <option value="div">div教程</option>
            </select>
    </li>
  </ul>
</form>
</body>
</html>

將表單元素序列化為json物件，再用JSON.stringify()將json物件轉換為字串，並顯示在div中。

相關文章