少说多做,直接运行代码,代码中有注释:

 



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=%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88++%E5%8E%89%E5%AE%B3%EF%BC%81
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>