serialize()序列化 和serializeArray()和param()


他人相關文章鏈接

 

1、serialize()

  能將DOM元素序列化為字符串,

  .serialize() 方法可以操作已選取個別表單元素的 jQuery 對象,比如 <input>, <textarea> 以及 <select>。不過,選擇 <form> 標簽本身進行序列化一般更容易些:

例如:

  

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
 7         <script>
 8             $(function(){
 9                 $('form').submit(function() {
10                   alert($(this).serialize());
11                   return false;
12                 });
13             })
14         </script>
15     </head>
16     <body>
17         <form>
18           <div><input type="text" name="a" value="1" id="a" /></div>
19           <div><input type="text" name="b" value="2" id="b" /></div>
20           <div><input type="hidden" name="c" value="3" id="c" /></div>
21           <div>
22             <textarea name="d" rows="8" cols="40">4</textarea>
23           </div>
24           <div><select name="e">
25             <option value="5" selected="selected">5</option>
26             <option value="6">6</option>
27             <option value="7">7</option>
28           </select></div>
29           <div>
30             <input type="checkbox" name="f" value="8" id="f" />
31           </div>
32           <div>
33             <input type="submit" name="g" value="Submit" id="g" />
34           </div>
35         </form>
36     </body>
37 </html>

 

 

 

2、param()

    

3、serializeArray()

  

 1 <!DOCTYPE html>
 2 <!--
 3     作者:1243860037@qq.com
 4     時間:2018-01-18
 5     描述:
 6                 注意在ff中進行調試的時候,例子中用的是console.log(),查看方法是f12后,點擊控制台,然后點擊“日志”,讓其亮着才看得見
 7 -->
 8 <html>
 9     <head>
10         <meta charset="UTF-8">
11         <title></title>
12         <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
13         <script>
14             $(function(){
15                 $("#btn").click(function(){
16                     
17                     //console.log($("#form1").serializeArray());
18                     console.log($(":text,select,:checked").serializeArray());
19                     //console.log("hello world");
20                 })
21             })
22         </script>
23     </head>
24     <body>
25         <form id="form1" name="myForm" action="#" method="post">  
26             <input name="uid" type="hidden" value="1" />  
27             <input name="username" type="text" value="張三" />  
28             <input name="password" type="text" value="123456" />  
29             <select name="grade" id="grade">  
30                 <option value="1">一年級</option>  
31                 <option value="2">二年級</option>  
32                 <option value="3" >三年級</option>  
33                 <option value="4">四年級</option>  
34                 <option value="5">五年級</option>  
35                 <option value="6">六年級</option>  
36             </select>  
37             <input name="sex" type="radio" checked="checked" value="1" />38             <input name="sex" type="radio" value="0" />39             <input name="hobby" type="checkbox" checked="checked" value="1" />游泳  
40             <input name="hobby" type="checkbox" checked="checked" value="2" />跑步  
41             <input name="hobby" type="checkbox" value="3" />羽毛球  
42             <input name="btn" id="btn" type="button" value="點擊" />  
43         </form>
44     </body>
45 </html>

運行結果:

  

在控制台中查看console.log()的值

  

 

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM