uTools-Manuals/docs/jQuery/jQuery.param.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.param()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/miscellaneous/">杂项</a> &gt; <a href="/category/miscellaneous/collection-manipulation/">集合操作</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/forms/">表单</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/ajax/">Ajax</a> &gt; <a href="/category/ajax/helper-functions/">辅助函数</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.param/" target="_blank">jQuery.param()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-param1"><h2 class="section-title">
<span class="name">jQuery.param( obj )</span><span class="returns">返回: <a href="/Types/#String">String</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>创建一个数组或对象序列化的的字符串，适用于一个URL 地址查询字符串或Ajax请求。 </p>
<ul class="signatures">
<li class="signature" id="jQuery-param-obj">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2/">1.2</a></span>jQuery.param( obj )</h4>
<ul><li>
<div><strong>obj</strong></div>
<div>类型: <a href="/Types/#Array,%20Object">Array, Object</a>
</div>
<div>用于数组或序列化的对象。</div>
</li></ul>
</li>
<li class="signature" id="jQuery-param-obj-traditional">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>jQuery.param( obj, traditional )</h4>
<ul>
<li>
<div><strong>obj</strong></div>
<div>类型: <a href="/Types/#Array,%20Object">Array, Object</a>
</div>
<div>用于数组或序列化的对象。</div>
</li>
<li>
<div><strong>traditional</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>一个布尔值，指示是否执行了传统的“shallow”的序列化。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>这个函数 可以将表单元素的值 转换为 序列化字符串 (更多细节查阅 <a href="/serialize/">.serialize()</a> )。</p>
<p>在 jQuery 1.3中, 这个函数的返回值被用来代替函数作为一个字符串。</p>
<p>在 jQuery 1.4中,  <code>$.param()</code> 方法将会通过深度递归的方式序列化对象，以便符合现代化脚本语言和框架的需求，比如 PHP 和 Ruby on Rails。 你可以通过设置 <code>jQuery.ajaxSettings.traditional = true;</code>废除这个全局功能。</p>
<p>
			      如果传递的对象是一个数组，它必须是一个对象数组，其格式要跟<a href="/serializeArray">.serializeArray()</a>返回的格式一样：
			    </p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[{name:<span class="string">"first"</span>,value:<span class="string">"Rick"</span>},</code></div></div><div class="container"><div class="line"><code>{name:<span class="string">"last"</span>,value:<span class="string">"Astley"</span>},</code></div></div><div class="container"><div class="line"><code>{name:<span class="string">"job"</span>,value:<span class="string">"Rock Star"</span>}]</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<blockquote>
<p><strong>注意:</strong>  因为一些框架解析序列化的数字的能力有限， 在传递 <code>obj</code> 参数时我们应该谨慎，尽量不要传递含有对象的数组，或者数组中嵌套其它数组。</p>
</blockquote>
<blockquote>
<p><strong>注意:</strong> 
			      由于目前对序列化字符串没有统一的规约，此方法无法对复杂数据结构进行编码，使之可以支持所有语言。
			在此之前，
			<code>$.param</code> 方法将继续保持其目前的形式。
			      </p>
</blockquote>
<p>在 jQuery 1.4 HTML5中input元素也是序列化的元素。</p>
<p>我们可以显示一个对象的查询字符串 和一个相应的URI-decoded 版本，如下:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> myObject = {</code></div></div><div class="container"><div class="line"><code>  a: {</code></div></div><div class="container"><div class="line"><code>    one: <span class="number">1</span>, </code></div></div><div class="container"><div class="line"><code>    two: <span class="number">2</span>, </code></div></div><div class="container"><div class="line"><code>    three: <span class="number">3</span></code></div></div><div class="container"><div class="line"><code>  }, </code></div></div><div class="container"><div class="line"><code>  b: [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> recursiveEncoded = $.param(myObject);</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> recursiveDecoded = decodeURIComponent($.param(myObject));</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>alert(recursiveEncoded);</code></div></div><div class="container"><div class="line"><code>alert(recursiveDecoded);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<code>recursiveEncoded</code> 和 <code>recursiveDecoded</code>  的结果如下：</p>
<p>
<span class="output">a%5Bone%5D=1&amp;a%5Btwo%5D=2&amp;a%5Bthree%5D=3&amp;b%5B%5D=1&amp;b%5B%5D=2&amp;b%5B%5D=3</span>
<br/>
<span class="output">a[one]=1&amp;a[two]=2&amp;a[three]=3&amp;b[]=1&amp;b[]=2&amp;b[]=3</span>
</p>
<p> 
			在jQuery1.4之前，要模仿<code>$.param()</code>的行为，我们可以设置 <code>traditional</code> 参数为 <code>true</code>：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> myObject = {</code></div></div><div class="container"><div class="line"><code>  a: {</code></div></div><div class="container"><div class="line"><code>    one: <span class="number">1</span>, </code></div></div><div class="container"><div class="line"><code>    two: <span class="number">2</span>, </code></div></div><div class="container"><div class="line"><code>    three: <span class="number">3</span></code></div></div><div class="container"><div class="line"><code>  }, </code></div></div><div class="container"><div class="line"><code>  b: [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> shallowEncoded = $.param(myObject, <span class="literal">true</span>);</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> shallowDecoded = decodeURIComponent(shallowEncoded);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>alert(shallowEncoded);</code></div></div><div class="container"><div class="line"><code>alert(shallowDecoded);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><code>shallowEncoded</code> 和 <code>shallowDecoded</code> 的结果如下：</p>
<p>
<span class="output">a=%5Bobject+Object%5D&amp;b=1&amp;b=2&amp;b=3</span>
<br/>
<span class="output">a=[object+Object]&amp;b=1&amp;b=2&amp;b=3</span>
</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">序列化一个 key/value 对象./span&gt;
			</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"><span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"results"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> params = { width:<span class="number">1680</span>, height:<span class="number">1050</span> };</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> str = jQuery.param(params);</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"#results"</span>).text(str);</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">序列号一些复杂的对象</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// &lt;=1.3.2: </span></code></div></div><div class="container"><div class="line"><code>$.param({ a: [<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>] }) <span class="comment">// "a=2&amp;a=3&amp;a=4"</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// &gt;=1.4:</span></code></div></div><div class="container"><div class="line"><code>$.param({ a: [<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>] }) <span class="comment">// "a[]=2&amp;a[]=3&amp;a[]=4"</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// &lt;=1.3.2: </span></code></div></div><div class="container"><div class="line"><code>$.param({ a: { b:<span class="number">1</span>,c:<span class="number">2</span> }, d: [<span class="number">3</span>,<span class="number">4</span>,{ e:<span class="number">5</span> }] }) <span class="comment">// "a=[object+Object]&amp;d=3&amp;d=4&amp;d=[object+Object]"</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// &gt;=1.4: </span></code></div></div><div class="container"><div class="line"><code>$.param({ a: { b:<span class="number">1</span>,c:<span class="number">2</span> }, d: [<span class="number">3</span>,<span class="number">4</span>,{ e:<span class="number">5</span> }] }) <span class="comment">// "a[b]=1&amp;a[c]=2&amp;d[]=3&amp;d[]=4&amp;d[2][e]=5"</span></code></div></div><div class="container"><div class="line"><code> </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>