• 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()的值

      

        

    本人小白,博客作为在线笔记,若有错误,还望指出,转载链接截图等皆为学习,若有侵权,请告知,
  • 相关阅读:
    js的BOM对象完全解析
    转:JavaScript中的this陷阱的最全收集
    转载:冷门js技巧
    MVVM的架构设计与团队协作 with StoryBoard
    ReactiveCocoa & FRP & MVVM
    ReactiveCocoa的冷信号与热信号 探讨
    Git本地项目上传 & SourceTree & GitHub 简单使用
    Monad / Functor / Applicative 浅析
    map & flatMap 浅析
    Swift -> Let & Var 背后编程模式 探讨
  • 原文地址:https://www.cnblogs.com/xiaoxiaoyao/p/8310245.html
Copyright © 2020-2023  润新知