jQuery serialize()

admin發表於2017-02-20
jQuery
此方法可以序列化表單值，由此建立一個標準的URL編碼文字字串。

操作的物件是一個或者多個表單元素，比如input元素或者多行文字域，當然也可以直接是form表單元素。

序列化的結果可以作為ajax請求向伺服器傳送的資料。

語法結構:

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

引數解析:

此方法不接收任何引數。

jQuery1.0版本新增。

特別說明:

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

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

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

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

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
$.ajax({
  type:"POST",
  dataType:"json",
  url:ajaxCallBack,
  data:$('#myForm').serialize(),
  success: function(msg){
    //code
  }
});

作為ajax請求向伺服器傳送的資料。

[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">
$(function(){
   $("#submit").click(function(){
     $("#show").text($("#myform").serialize());
   });
});
</script>
</head>
<body>
<form id="myform">
  網站名稱:<input type="text" name="webname" value="螞蟻部落"/><br/>
  網站地址:<input type="text" name="url" value="softwhy.com"/><br />
  <input type="button" id="submit" value="檢視效果"/> 
</form>
<div id="show"></div>
</body>
</html>

點選提交按鈕，可以在div中顯示序列化的字串。

相關文章