jquery 表单序列化

左手的ㄟ右手 2022-05-27 07:39 230阅读 0赞

jQuery序列化表单的方法总结

现在这里贴出案例中静态的html网页内容：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/jquery-3.2.1.js"></script>
  8. </head>
  9. <body>
  10.     <form method="post" action="#" id="test_form">
  11.         用户名：<input type="text" name="username"/><br>
  12.         密   码：<input type="password" name="password"><br>
  13.         爱   好：吃饭<input type="checkbox" name="hobby" value="eat" checked/> 睡觉<input type="checkbox" name="hobby" value="sleep"/><br/>
  14.         性   别：男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
  15.         学   校： <select name="school">
  16.                     <option value="yangguang">阳光小学</option>
  17.                     <option value="xiwang">希望小学</option>
  18.                     <option value="tiantian">天天小学</option>
  19.                 </select>
  20.         <br><br><br>
  21.         <input type="submit" value="提交"/>   <input type="reset" value="重置" />
  22.         <br> <br> <br>
  23.         <input type="button" value="点我序列化为url" id="serializeUrl"/>  <input type="button" value="点我序列化为json" id="serializeJson"/>
  24.     </form>
  26. </body>
  27. </html>

知识点一：serialize()

方法介绍：

  1. 作用：序列表单内容为字符串。
  2.     参数： 无
  3.     返回值：表单内容的字符串格式
  • 1
  • 2
  • 3
  • 4

案例代码：

  1. <script> $(function () { $("#serializeUrl").click(function () { testJquerySerializeUrl(); }); }); function testJquerySerializeUrl() { var serializeUrl = $("#test_form").serialize(); alert("序列化为url格式为："+serializeUrl); } </script>

这里写图片描述

总结：

  1. 1.我们看到输出的结果为表单项中的各表单元素的name和value值
  2. 2.格式是以url参数的形式，第一个参数前面没有&符号
  • 1
  • 2

知识点二：serializeArray()方法

方法介绍：

  1. 1.作用：序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
  2. 2.参数：无
  3. 3.返回值：返回的是JSON对象而非JSON字符串
  5. 4.返回格式为：
  6.    [ 
  7.      {name: 'firstname', value: 'Hello'}, 
  8.      {name: 'lastname', value: 'World'},
  9.      {name: 'alias'}, // this one was empty
  10.   ]

案例：

  1. $(function () { 
  2.             $("#serializeUrl").click({
  3.    "name":"zxy"},function () { 
  4.                 testJquerySerializeUrl();
  5.                // alert();
  6.             });
  8.             $("#serializeJson").click({},function () { 
  9.                  testJquerySerializeJson();
  10.             });
  12.         });
  15.         function testJquerySerializeJson() { 
  16.             var serializeJson = $("#test_form").serializeArray();
  17.             alert("序列化为json格式为："+JSON.stringify(serializeJson)); //JSON.stringify(json对象) 将json对象转化为json字符串
  19.         }

结果为：
这里写图片描述

总结：

  1. 1.我们看到调用方法返回的是json对象
  2. 2.可是用JSON.stringify()方法将json对象转化为json字符串

发表评论

表情：
评论列表 （有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读