url参数传参关于空格加号中文的问题

Bertha 。 2022-04-01 06:09 324阅读 0赞

我们经常会遇到这样的问题，需要将页面上表单的参数传给后台，但是有些时候，参数会因为一些特殊的情况，出现一些转换，导致参数传给后台的时候出现问题。相信大家在前端工作中会遇到这样的问题。

*  中文问题：前端中文，传给后端时，变成了百分号字母数字组合的URL编码。
 *  空格问题：空格会变成+号。
 *  加号+问题：解决加号问题的时候，导致加号被当成了空格。

jQuery为我们提供了一个方法$(form).serialize()，可以获取表单的数据，然后这个数据可以直接作为ajax的data参数，直接提交给后台。

示例如下：这里是一个模拟中文加号和空格的示例。

<!doctype html>
    <html>
          <head>
    	       <meta charset="UTF-8"/>
    		   <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    		   <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    		   <link rel="stylesheet" type="text/css" href="../demo/demo.css"/>
    		   <script type="text/javascript" src="../jquery.min.js"></script>
    		   <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    	  </head>
    	  <body>
    	       <div id="container">
    		       <form id="ff">
    		       	   <label>姓名：<input type="text" class="easyui-textbox" name="username"
                         value="张三ad+in"/></label>
    		       	   <label>电话：<input type="text" class="easyui-textbox" name="mobile" 
                         value="150  186301"/></label>
    		       	   <input type="button" class="easyui-linkbutton" value="submit" 
                        onclick="save()" style="height:30px;width:80px;"/>
    		       </form>
    		   </div>
    		   <script type="text/javascript">
    		      function save(){
    		      	var formdata = $("#ff").serialize();
    		      	console.log(formdata);
    		      	$.ajax({
    		      		url:"http://127.0.0.1:9080/user/list",
    		      		type:'get',
    		      		data:formdata,
    		      		success:function(data){
    		      			console.log(data);
    		      		}
    		      	});
    		      }
    		   </script>
    	  </body>
    </html>

默认情况下，参数不会出现以上三个中的任何问题。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

这种直接把$().serialize()的结果当做参数提交的方式，大多数能够满足我们的要求，但是有时候在查询的时候，表单提交的参数，我们需要过滤掉为空的参数，或者增加额外的参数，比如分页信息page,size，排序字段sortName等。这个时候，我们需要把$().serialize()的的结果，解析为一个对象。解析的过程中，会遇到问题。

我们知道，$().serialize()的结果是一个参数按照key=value的方式使用&拼接的字符串。如：

![20181229153838108.png][]

这样按照普通的分割字符串的方式，我们可以将form表单的参数按照"&"分割，再按照"="分割，就可以得到我们想要的结果。

这种方式，看似没有问题，却会导致前面提到过的三个问题。

后台接收到的参数变为了：User(username=%E5%BC%A0%E4%B8%89ad%2Bin, password=null, mobile=150++186301)

为了解决这三个问题，我们需要三行代码。分别解决这三个问题。

data = decodeURI(data); //这一句解决中文问题  
data = data.replace(/\\+/g," "); //这一句解决空格变为+的问题  
data = data.replace(/%2B/g,"+"); //这一句解决加号变为%2B的问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

这样，就彻底解决了参数传递的问题。

此外，如果还有特殊字符，可以追加，比如data=data.replace(/%3F/g,"?")。

这里贴出完整的示例：

<!doctype html>
    <html>
          <head>
    	       <meta charset="UTF-8"/>
    		   <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    		   <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    		   <link rel="stylesheet" type="text/css" href="../demo/demo.css"/>
    		   <script type="text/javascript" src="../jquery.min.js"></script>
    		   <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    	  </head>
    	  <body>
    	       <div id="container">
    		       <form id="ff">
    		       	   <label>姓名：<input type="text" class="easyui-textbox" name="
    		       	   	username" value="张三ad+in"/></label>
    		       	   <label>电话：<input type="text" class="easyui-textbox" name="
    		       	   	mobile" value="150  186301"/></label>
    		       	   <input type="button" class="easyui-linkbutton" value="submit" 
    		       	   onclick="save()" style="height:30px;width:80px;"/>
    		       </form>
    		   </div>
    		   <script type="text/javascript">
    		      function save(){
    		      	var formdata = getFormData("ff");
    		      	console.log(formdata);
    		      	$.ajax({
    		      		url:"http://127.0.0.1:9080/user/list",
    		      		type:'get',
    		      		data:formdata,
    		      		success:function(data){
    		      			console.log(data);
    		      		}
    		      	});
    		      }
    		      function getFormData(id){
    		      	var ff = document.getElementById(id);
    		      	var data = $(ff).serialize();
    		      	data = decodeURI(data);
    		      	data = data.replace(/\+/g," ");
    		      	data = data.replace(/%2B/g,"+");
    		      	data = data.replace(/%3F/g,"?");
    		      	var res = {};
    		      	var kpair = data&&data.split("&");
    		      	$(kpair).each(function(index,item){
    		      		var key = item.split("=")[0];
    		      		var value = item.split("=")[1];
    		      		res[key] = value;
    		      	});
    		      	return res;
    		      }
    		   </script>
    	  </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220401/898da1c93427454cae2feaf48460da51.png
[20181229153838108.png]: /images/20220401/dad0875c1be349948f5eee0618a92049.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20220401/f2bab428f5964d48a89f51a44fda04b0.png