无涯教程-jQuery - serializeArray( )方法函数 serializeArray()方法会序列化所

serializeArray()方法会序列化所有表单和表单元素，如.serialize()方法，但会返回一个JSON数据结构供您使用。

返回的JSON结构不是字符串。您必须使用插件或第三方库来"stringify"。

serializeArray( ) - 语法

$.serializeArray( )

serializeArray( ) - 示例

假设无涯教程在serialize.php文件中具有以下PHP内容-

<?php
if( $_REQUEST["name"] ) {
 $name</span><span class="pun">=</span><span class="pln">$ _REQUEST[name];
echo "Welcome ".  $name</span><span class="pun">;</span><span class="pln">$ age= $_REQUEST</span><span class="pun">[</span><span class="str">age</span><span class="pun">];</span><span class="pln"> echo </span><span class="str">"&lt;br /&gt;Your age : "</span><span class="pun">.</span><span class="pln">$ age;
 $sex</span><span class="pun">=</span><span class="pln">$ _REQUEST[sex];
echo "<br />Your gender : ". $sex;
}
?>

以下是一个简单的示例，简单说明了此方法的用法-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="tag">&gt;</span><span class="pln">
     $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
		
        $</span><span class="pun">(</span><span class="str">"#driver"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">){</span><span class="pln">
			
           $</span><span class="pun">.</span><span class="pln">post</span><span class="pun">(</span><span class="pln"> 
              </span><span class="str">"/jquery/serialize.php"</span><span class="pun">,</span><span class="pln">
              $</span><span class="pun">(</span><span class="str">"#testform"</span><span class="pun">).</span><span class="pln">serializeArray</span><span class="pun">(),</span><span class="pln">
              </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                 $</span><span class="pun">(</span><span class="str">#stage1</span><span class="pun">).</span><span class="pln">html</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span><span class="pln">
              </span><span class="pun">}</span><span class="pln">
           </span><span class="pun">);</span><span class="pln">
				
           </span><span class="kwd">var</span><span class="pln"> fields</span><span class="pun">=</span><span class="pln">$</span><span class="pun">(</span><span class="str">"#testform"</span><span class="pun">).</span><span class="pln">serializeArray</span><span class="pun">();</span><span class="pln">
           $</span><span class="pun">(</span><span class="str">"#stage2"</span><span class="pun">).</span><span class="pln">empty</span><span class="pun">();</span><span class="pln">
				
           jQuery</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="pln">fields</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">i</span><span class="pun">,</span><span class="pln"> field</span><span class="pun">){</span><span class="pln">
              $</span><span class="pun">(</span><span class="str">"#stage2"</span><span class="pun">).</span><span class="pln">append</span><span class="pun">(</span><span class="pln">field</span><span class="pun">.</span><span class="pln">value </span><span class="pun">+</span><span class="pln"> </span><span class="str">" "</span><span class="pun">);</span><span class="pln">
           </span><span class="pun">});</span><span class="pln">
				
        </span><span class="pun">});</span><span class="pln">
			
     </span><span class="pun">});</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</head>
<body>
<p>Click on the button to load result.html file:</p>
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"stage1"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 1
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"stage2"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">blue</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
     STAGE - 2
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
	
  </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"testform"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="tag">&lt;table&gt;</span><span class="pln">
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;p&gt;</span><span class="pln">Name:</span><span class="tag">&lt;/p&gt;&lt;/td&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"name"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"40"</span><span class="pln"> </span><span class="tag">/&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
			
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;p&gt;</span><span class="pln">Age:</span><span class="tag">&lt;/p&gt;&lt;/td&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"age"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"40"</span><span class="pln"> </span><span class="tag">/&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
			
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;p&gt;</span><span class="pln">Sex:</span><span class="tag">&lt;/p&gt;&lt;/td&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;</span><span class="pln"> </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"sex"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Male"</span><span class="pln"> </span><span class="atn">selected</span><span class="tag">&gt;</span><span class="pln">Male</span><span class="tag">&lt;/option&gt;</span><span class="pln">
              </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Female"</span><span class="pln"> </span><span class="atn">selected</span><span class="tag">&gt;</span><span class="pln">Female</span><span class="tag">&lt;/option&gt;</span><span class="pln">
           </span><span class="tag">&lt;/select&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
			
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">colspan</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"driver"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Load Data"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
           </span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">  
     </span><span class="tag">&lt;/table&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">

</body>
</html>

这将产生以下输出-

无涯教程-jQuery - serializeArray( )方法函数

serializeArray( ) - 语法

serializeArray( ) - 示例

参考链接