uTools-Manuals/docs/jQuery/serializeArray.html

186 lines
24 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">.serializeArray()</h1>
<div class="entry-meta">
所属分类:<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/serializeArray/" target="_blank">.serializeArray()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="serializeArray1"><h2 class="section-title">
<span class="name">.serializeArray()</span><span class="returns">返回: <a href="/Types/#Array">Array</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>将用作提交的表单元素的值编译成拥有name和value对象组成的数组。例如[ { name: a value: 1 }, { name: b value: 2 },...]</p>
<ul class="signatures"><li class="signature" id="serializeArray">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2/">1.2</a></span>.serializeArray()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数。</div></li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>.serializeArray()</code> 方法创建一个对象组成的javascript数组用来编码成一个JSON一样的字符串。 它可以对一个代表一组表单元素的 jQuery 对象进行操作。表单元素可以有以下几种类型:</p>
<div class="syntaxhighlighter xml 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>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">form</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">name</span>=<span class="value">"a"</span> <span class="attribute">value</span>=<span class="value">"1"</span> <span class="attribute">id</span>=<span class="value">"a"</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">div</span>&gt;</span><span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">name</span>=<span class="value">"b"</span> <span class="attribute">value</span>=<span class="value">"2"</span> <span class="attribute">id</span>=<span class="value">"b"</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">div</span>&gt;</span><span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"hidden"</span> <span class="attribute">name</span>=<span class="value">"c"</span> <span class="attribute">value</span>=<span class="value">"3"</span> <span class="attribute">id</span>=<span class="value">"c"</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">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">textarea</span> <span class="attribute">name</span>=<span class="value">"d"</span> <span class="attribute">rows</span>=<span class="value">"8"</span> <span class="attribute">cols</span>=<span class="value">"40"</span>&gt;</span>4<span class="tag">&lt;/<span class="title">textarea</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <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">div</span>&gt;</span><span class="tag">&lt;<span class="title">select</span> <span class="attribute">name</span>=<span class="value">"e"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">option</span> <span class="attribute">value</span>=<span class="value">"5"</span> <span class="attribute">selected</span>=<span class="value">"selected"</span>&gt;</span>5<span class="tag">&lt;/<span class="title">option</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">option</span> <span class="attribute">value</span>=<span class="value">"6"</span>&gt;</span>6<span class="tag">&lt;/<span class="title">option</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">option</span> <span class="attribute">value</span>=<span class="value">"7"</span>&gt;</span>7<span class="tag">&lt;/<span class="title">option</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">select</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">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">name</span>=<span class="value">"f"</span> <span class="attribute">value</span>=<span class="value">"8"</span> <span class="attribute">id</span>=<span class="value">"f"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <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">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">name</span>=<span class="value">"g"</span> <span class="attribute">value</span>=<span class="value">"Submit"</span> <span class="attribute">id</span>=<span class="value">"g"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <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">form</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<code>.serializeArray()</code>方法使用标准的W3C<a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2">"successful controls"</a>的标准来检测哪些元素应当包括在内。被禁用的元素不会被包括在内。并且,元素必须含有 <code>name</code> 属性。此外,提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。</p>
<p><code>.serializeArray()</code> 方法可以对单独选择的表单元素对象进行操作, 比如 <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, 和 <code>&lt;select&gt;</code>。还有个更方便的方法是,直接使用 <code>&lt;form&gt;</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'form'</span>).submit(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> console.log($(<span class="keyword">this</span>).serializeArray());</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> <span class="literal">false</span>;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这将产生以下数据结构(浏览器提供的<code>console.log</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>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>[</code></div></div><div class="container"><div class="line"><code> {</code></div></div><div class="container"><div class="line"><code> name: <span class="string">"a"</span>,</code></div></div><div class="container"><div class="line"><code> value: <span class="string">"1"</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> {</code></div></div><div class="container"><div class="line"><code> name: <span class="string">"b"</span>,</code></div></div><div class="container"><div class="line"><code> value: <span class="string">"2"</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> {</code></div></div><div class="container"><div class="line"><code> name: <span class="string">"c"</span>,</code></div></div><div class="container"><div class="line"><code> value: <span class="string">"3"</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> {</code></div></div><div class="container"><div class="line"><code> name: <span class="string">"d"</span>,</code></div></div><div class="container"><div class="line"><code> value: <span class="string">"4"</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> {</code></div></div><div class="container"><div class="line"><code> name: <span class="string">"e"</span>,</code></div></div><div class="container"><div class="line"><code> value: <span class="string">"5"</span></code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>]</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">从表单获取值,遍历并且显示他们</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>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
<div class="line n48">48</div>
<div class="line n49">49</div>
<div class="line n50">50</div>
<div class="line n51">51</div>
<div class="line n52">52</div>
<div class="line n53">53</div>
<div class="line n54">54</div>
<div class="line n55">55</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></code></div></div><div class="container"><div class="line"><code> <span class="tag">body</span>, <span class="tag">select</span> <span class="rules">{ <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">14</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">form</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">b</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <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">p</span>&gt;</span><span class="tag">&lt;<span class="title">b</span>&gt;</span>Results:<span class="tag">&lt;/<span class="title">b</span>&gt;</span> <span class="tag">&lt;<span class="title">span</span> <span class="attribute">id</span>=<span class="value">"results"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">p</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">form</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">select</span> <span class="attribute">name</span>=<span class="value">"single"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">option</span>&gt;</span>Single<span class="tag">&lt;/<span class="title">option</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">option</span>&gt;</span>Single2<span class="tag">&lt;/<span class="title">option</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">select</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">select</span> <span class="attribute">name</span>=<span class="value">"multiple"</span> <span class="attribute">multiple</span>=<span class="value">"multiple"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">option</span> <span class="attribute">selected</span>=<span class="value">"selected"</span>&gt;</span>Multiple<span class="tag">&lt;/<span class="title">option</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">option</span>&gt;</span>Multiple2<span class="tag">&lt;/<span class="title">option</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">option</span> <span class="attribute">selected</span>=<span class="value">"selected"</span>&gt;</span>Multiple3<span class="tag">&lt;/<span class="title">option</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">select</span>&gt;</span><span class="tag">&lt;<span class="title">br</span>/&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">name</span>=<span class="value">"check"</span> <span class="attribute">value</span>=<span class="value">"check1"</span> <span class="attribute">id</span>=<span class="value">"ch1"</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">label</span> <span class="attribute">for</span>=<span class="value">"ch1"</span>&gt;</span>check1<span class="tag">&lt;/<span class="title">label</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">name</span>=<span class="value">"check"</span> <span class="attribute">value</span>=<span class="value">"check2"</span> <span class="attribute">checked</span>=<span class="value">"checked"</span> <span class="attribute">id</span>=<span class="value">"ch2"</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">label</span> <span class="attribute">for</span>=<span class="value">"ch2"</span>&gt;</span>check2<span class="tag">&lt;/<span class="title">label</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"radio"</span> <span class="attribute">name</span>=<span class="value">"radio"</span> <span class="attribute">value</span>=<span class="value">"radio1"</span> <span class="attribute">checked</span>=<span class="value">"checked"</span> <span class="attribute">id</span>=<span class="value">"r1"</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">label</span> <span class="attribute">for</span>=<span class="value">"r1"</span>&gt;</span>radio1<span class="tag">&lt;/<span class="title">label</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"radio"</span> <span class="attribute">name</span>=<span class="value">"radio"</span> <span class="attribute">value</span>=<span class="value">"radio2"</span> <span class="attribute">id</span>=<span class="value">"r2"</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">label</span> <span class="attribute">for</span>=<span class="value">"r2"</span>&gt;</span>radio2<span class="tag">&lt;/<span class="title">label</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">form</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> <span class="function"><span class="keyword">function</span> <span class="title">showValues</span><span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> fields = $(<span class="string">":input"</span>).serializeArray();</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"#results"</span>).empty();</code></div></div><div class="container"><div class="line"><code> jQuery.each(fields, <span class="keyword">function</span>(i, field){</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"#results"</span>).append(field.value + <span class="string">" "</span>);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> $(<span class="string">":checkbox, :radio"</span>).click(showValues);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"select"</span>).change(showValues);</code></div></div><div class="container"><div class="line"><code> showValues();</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></section>
</div></article> </div>
</article>