jQuery.param()

admin發表於2017-02-21
jQuery

此方法可以序列化陣列或者物件，並返回序列化後的字串。

返回值可以用在AJAX請求時在URL查詢字串中。

如果引數是陣列，那麼此陣列必須是物件陣列。

語法結構一:

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

引數解析:

obj:一個用來序列化的一個陣列，一個普通的物件，或一個jQuery物件。

jQuery1.2版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
jQuery.param(obj, traditional)

引數解析:

（1）.obj:一個用來序列化的一個陣列，一個普通的物件，或一個jQuery物件。

（2）.traditional:可選，布林值，省略或者為false，就會進行深度序列化，否則不會進行深度序列化。

jQuery1.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(){ 
  $("#bt").click(function () {
    var params =["螞蟻部落",2,"分享互助"];
    var str = jQuery.param(params);
    $("span").text(str);
  })      
}) 
</script> 
</head> 
<body> 
<div>檢測結果:<span></span></div> 
<input type="button" id="bt" value="檢視演示"/>
</body> 
</html>

輸出結果很明顯有問題，jQuery.param()方法的引數如果是陣列，必須是一個物件陣列。

[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 params = [{ name: 'user', value: '螞蟻部落' },
    { name: 'age', value: 2 },
    { name: 'target' }]
  $("#bt").click(function () {
    var str = jQuery.param(params);
    $("span").text(str);
  })      
}) 
</script> 
</head> 
<body> 
<div>檢測結果:<span></span></div> 
<input type="button" id="bt" value="檢視演示"/>
</body> 
</html>

上面的程式碼中，引數是一個物件陣列，也就是說它的陣列元素是物件。

[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 obj={
    a:{
      one:1, 
      two:2, 
      three:3
    }, 
    b:[1,2,3]
  };
 
  $("#bt").click(function(){ 
    $("#one span").text(jQuery.param(obj));
    $("#two span").text(jQuery.param(obj,true));
  })      
}) 
</script> 
</head> 
<body> 
<div id="one">深度:<span></span></div> 
<div id="two">淺度:<span></span></div> 
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

從上面程式碼的輸出值就可以很清晰的明白深度和和淺度的意思了。