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

213 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>