1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">jQuery.param()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/miscellaneous/" title="View all posts in Miscellaneous">Miscellaneous</a> > <a href="http://api.jquery.com/category/miscellaneous/collection-manipulation/" title="View all posts in Collection Manipulation">Collection Manipulation</a></span> | <span class="category"><a href="http://api.jquery.com/category/forms/" title="View all posts in Forms">Forms</a></span> | <span class="category"><a href="http://api.jquery.com/category/ajax/" title="View all posts in Ajax">Ajax</a> > <a href="http://api.jquery.com/category/ajax/helper-functions/" title="View all posts in Helper Functions">Helper Functions</a></span>
</div>
</div>
<div id="jQuery-param1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.param( obj )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#String">String</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request. </p>
<ul class="signatures">
<li class="signature" id="jQuery-param-obj">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>jQuery.param( obj )</h4>
<p class="arguement"><strong>obj</strong>An array or object to serialize.</p>
</li>
<li class="signature" id="jQuery-param-obj-traditional">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>jQuery.param( obj, traditional )</h4>
<p class="arguement"><strong>obj</strong>An array or object to serialize.</p>
<p class="arguement"><strong>traditional</strong>A Boolean indicating whether to perform a traditional "shallow" serialization.</p>
</li>
</ul>
<div class="longdesc">
<p>This function is used internally to convert form element values into a serialized string representation (See <a href="/serialize/">.serialize()</a> for more information).</p>
<p>As of jQuery 1.3, the return value of a function is used instead of the function as a String.</p>
<p>As of jQuery 1.4, the <code>$.param()</code> method serializes deep objects recursively to accommodate modern scripting languages and frameworks such as PHP and Ruby on Rails. You can disable this functionality globally by setting <code>jQuery.ajaxSettings.traditional = true;</code>.</p>
<p>If the object passed is in an Array, it must be an array of objects in the format returned by <a href="/serializeArray/">.serializeArray()</a></p>
<pre>[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]</pre>
<blockquote>
<p><strong>Note:</strong> Because some frameworks have limited ability to parse serialized arrays, developers should exercise caution when passing an <code>obj</code> argument that contains objects or arrays nested within another array.</p>
</blockquote>
<blockquote>
<p><strong>Note:</strong> Because there is no universally agreed-upon specification for param strings, it is not possible to encode complex data structures using this method in a manner that works ideally across all languages supporting such input. Until such time that there is, the <code>$.param</code> method will remain in its current form.</p>
</blockquote>
<p>In jQuery 1.4, HTML5 input elements are also serialized.</p>
<p>We can display a query string representation of an object and a URI-decoded version of the same as follows:</p>
<pre>var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);
</pre>
<p>The values of <code>recursiveEncoded</code> and <code>recursiveDecoded</code> are alerted as follows:</p>
<p><span class="output">a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3</span><br><span class="output">a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3</span></p>
<p>To emulate the behavior of <code>$.param()</code> prior to jQuery 1.4, we can set the <code>traditional</code> argument to <code>true</code>:</p>
<pre>var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);
alert(shallowEncoded);
alert(shallowDecoded);
</pre>
<p>The values of <code>shallowEncoded</code> and <code>shallowDecoded</code> are alerted as follows:</p>
<p><span class="output">a=%5Bobject+Object%5D&b=1&b=2&b=3</span><br><span class="output">a=[object+Object]&b=1&b=2&b=3</span></p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Serialize a key/value object.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<div id="results"></div>
<script>
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Serialize a few complex objects</span>
</h4>
<pre class="prettyprint"><code class="example">
// <=1.3.2:
$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"
// >=1.4:
$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
// <=1.3.2:
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a=[object+Object]&d=3&d=4&d=[object+Object]"
// >=1.4:
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"
</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
