我们经常会遇到这样的问题,需要将页面上表单的参数传给后台,但是有些时候,参数会因为一些特殊的情况,出现一些转换,导致参数传给后台的时候出现问题。相信大家在前端工作中会遇到这样的问题。
- 中文问题:前端中文,传给后端时,变成了百分号字母数字组合的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>