serialize 序列化号处理

最新推荐文章于 2023-02-02 09:00:43 发布

转载最新推荐文章于 2023-02-02 09:00:43 发布 · 171 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=h0ac2aik2jaa&title=serialize+%E5%BA%8F%E5%88%97%E5%8C%96+%2B%E5%8F%B7%E5%A4%84%E7%90%86

文章标签：

#jquery #serialize #序列化 # 号处理

前端专栏收录该内容

1175 篇文章

订阅专栏

本文介绍了一个使用jQuery处理HTML表单序列化的示例，重点在于如何正确处理包含特殊字符的表单数据，通过使用正则表达式替换和解码URIComponent方法，确保数据在前后端之间的正确传递。

少说多做，直接运行代码，代码中有注释：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>serialize 序列化  号处理</title>
 7 </head>
 8 <body>
 9     <form id="form">
10         <label>
11             <input type="checkbox" name="r1" id="r1" value="前端工程师  厉害！" />前端工程师
12         </label>
13         <label>
14             <input type="checkbox" name="r1" id="r1" value="测试工程师  厉害！" />测试工程师
15         </label>
16         <label>
17             <input type="checkbox" name="r1" id="r1" value="后端工程师  厉害！" />后端工程师
18         </label>
19         <input type="button" name="btn" id="btn" value="提交" />
20     </form>
21     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
22     <script type="text/javascript">
23         $(function(){
24             $('#btn').click(function(){
25                 //serialize序列化，默认会调用encodeURIComponent()进行编码
26                 var pre = $('#form').serialize()
27                 //r1=前端工程师  厉害！
28                 //注意有 号
29                 console.log(pre);
30                 //对整个字符串中符合条件的 号都进行替换
31                 var next = pre.replace(/\ /g," ");
32                 //对serialize后的内容进行解码
33                 next = decodeURIComponent(next);
34                 //r1=前端工程师  厉害！
35                 //注意没有 号了
36                 console.log(next)
37             });
38         });
39     </script>
40 </body>
41 </html>