我们经常会遇到这样的问题，需要将页面上表单的参数传给后台，但是有些时候，参数会因为一些特殊的情况，出现一些转换，导致参数传给后台的时候出现问题。相信大家在前端工作中会遇到这样的问题。
- 中文问题：前端中文，传给后端时，变成了百分号字母数字组合的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>默认情况下，参数不会出现以上三个中的任何问题。
这种直接把$().serialize()的结果当做参数提交的方式，大多数能够满足我们的要求，但是有时候在查询的时候，表单提交的参数，我们需要过滤掉为空的参数，或者增加额外的参数，比如分页信息page,size，排序字段sortName等。这个时候，我们需要把$().serialize()的的结果，解析为一个对象。解析的过程中，会遇到问题。
我们知道，$().serialize()的结果是一个参数按照key=value的方式使用&拼接的字符串。如：
这样按照普通的分割字符串的方式，我们可以将form表单的参数按照"&"分割，再按照"="分割，就可以得到我们想要的结果。
function getFormData(id){
var ff = document.getElementById(id);
var data = $(ff).serialize();
console.log(data);
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;
}这种方式，看似没有问题，却会导致前面提到过的三个问题。
后台接收到的参数变为了：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的问题
这样，就彻底解决了参数传递的问题。
此外，如果还有特殊字符，可以追加，比如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>