jquery serialize传中文乱码解决方法
2015-09-25 12:03
501 查看
jquery form 表单.serialize()序列化后中文乱码 经过一天的时间终于解决了!
一开始的时候我并不知道乱码问题是jquery引起的!
我以为是后台转码的时间出错了!
最后在网络上到了关键信息:
jquery form表单.serialize()序列化后中文乱码问题原因及解决
原因:.serialize()自动调用了encodeURIComponent方法将数据编码了
解决方法:调用decodeURIComponent(XXX,true);将数据解码
例如:
var params = jQuery("#formId").serialize(); // http request parameters.
params = decodeURIComponent(params,true);
在进行编码
params = encodeURI(encodeURI(params));
后台
String paramsTrans = new String(params.getBytes("ISO-8859-1"),"UTF-8");
params = java.net.URLDecoder.decode(paramsTrans , "UTF-8");
问题解决。
----------------------------------------------------------------------------------------------------------------------------------
注意:页面端发出的数据作两次encodeURI,这个做的好处在于,不管浏览器用户在页面来设置编码,服务器所采用的编码来做一次URLencode转换成UTF-8.
encodeURL函数主要是来对URI来做转码,它默认是采用的UTF-8的编码.
具体说明2次encodeURI:
其中具体的原理分析如下,假设页面端输入的中文是一个“中”,按照下面步骤进行解码
1.第一次encodeURI,按照utf-8方式获取字节数组变成[-28,-72-83],对字节码数组进行遍历,把每个字节转化
成对应的16进制数,这样就变成了[E4,B8,AD],最后变成[%E4,%B8,%AD]
2.第二次encodeURI,把数组最后变成[%25E4,%25B8,%25AD]然后就把处理后的数据[%25E4,%25B8,%25AD]
发往服务器端,当应用服务器调用getParameter方法,getParameter方法会去向应用服务器请求参数
应用服务器最初获得的就是发送来的[%25E4,%25B8,%25AD],应用服务器会对这个数据进行URLdecode操作,
URldecode操作和encodeURL操作是相反的操作,处理结果就是[%E4,%B8,%AD],并把这个值返回
给getParameter方法
然后再在服务器端中调用相应的URL转码方法或者是函数 就可以把数据还原成最初页面发送过来的中文“中”了。
来源: <http://blog.csdn.net/xiao2shiqi/article/details/8438019>
jsp:
olderName=好人&olderNo=
olderName=%25E5%25A5%25BD%25E4%25BA%25BA&olderNo=
查询:“好人” 点击提交;
一开始的时候我并不知道乱码问题是jquery引起的!
我以为是后台转码的时间出错了!
最后在网络上到了关键信息:
jquery form表单.serialize()序列化后中文乱码问题原因及解决
原因:.serialize()自动调用了encodeURIComponent方法将数据编码了
解决方法:调用decodeURIComponent(XXX,true);将数据解码
例如:
var params = jQuery("#formId").serialize(); // http request parameters.
params = decodeURIComponent(params,true);
在进行编码
params = encodeURI(encodeURI(params));
后台
String paramsTrans = new String(params.getBytes("ISO-8859-1"),"UTF-8");
params = java.net.URLDecoder.decode(paramsTrans , "UTF-8");
问题解决。
----------------------------------------------------------------------------------------------------------------------------------
注意:页面端发出的数据作两次encodeURI,这个做的好处在于,不管浏览器用户在页面来设置编码,服务器所采用的编码来做一次URLencode转换成UTF-8.
encodeURL函数主要是来对URI来做转码,它默认是采用的UTF-8的编码.
具体说明2次encodeURI:
其中具体的原理分析如下,假设页面端输入的中文是一个“中”,按照下面步骤进行解码
1.第一次encodeURI,按照utf-8方式获取字节数组变成[-28,-72-83],对字节码数组进行遍历,把每个字节转化
成对应的16进制数,这样就变成了[E4,B8,AD],最后变成[%E4,%B8,%AD]
2.第二次encodeURI,把数组最后变成[%25E4,%25B8,%25AD]然后就把处理后的数据[%25E4,%25B8,%25AD]
发往服务器端,当应用服务器调用getParameter方法,getParameter方法会去向应用服务器请求参数
应用服务器最初获得的就是发送来的[%25E4,%25B8,%25AD],应用服务器会对这个数据进行URLdecode操作,
URldecode操作和encodeURL操作是相反的操作,处理结果就是[%E4,%B8,%AD],并把这个值返回
给getParameter方法
然后再在服务器端中调用相应的URL转码方法或者是函数 就可以把数据还原成最初页面发送过来的中文“中”了。
来源: <http://blog.csdn.net/xiao2shiqi/article/details/8438019>
jsp:
[code]<form class="form-horizontal" role="form" id="form">
<div class="form-group">
<label for="olderName" class="col-sm-2 control-label">老人名称</label>
<div class="col-sm-4">
<input type="text" class="form-control"
name="olderName" id="olderName" placeholder="老人名称">
</div>
</div>
<div class="form-group">
<label for="olderNo" class="col-sm-2 control-label">老人编号</label>
<div class="col-sm-4">
<input type="text" class="form-control"
name="olderNo" id="olderNo" placeholder="老人编号">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="button" id="search" class="btn btn-primary pull-right">查询</button>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn btn-default">清空</button>
</div>
</div>
</form>
js:
[code]$(function () {
$('#search').click(function () {
var formdata=$("#form").serialize();
console.log(formdata);
formdata = decodeURIComponent(formdata,true);
console.log(formdata);
formdata = encodeURI(encodeURI(formdata));
console.log(formdata);
$('#datatable').bootstrapTable('refresh', {
url:"${ctx}/bse/older/find?rnd="+Math.random()+"&"+formdata
});
});
});
打印出的信息:
olderName=%E5%A5%BD%E4%BA%BA&olderNo=olderName=好人&olderNo=
olderName=%25E5%25A5%25BD%25E4%25BA%25BA&olderNo=
后台:
拿到数据后进行解码[code]@RequestMapping(value="find",produces ="plain/text; charset=UTF-8")
public String find(BseOlder bseOlder, HttpServletRequest request, HttpServletResponse response, Model model) throws UnsupportedEncodingException {
System.out.println("olderName:" + bseOlder.getOlderName() + " olderNo:" + bseOlder.getOlderNo());
bseOlder.setOlderName(java.net.URLDecoder.decode(bseOlder.getOlderName(), "UTF-8"));
bseOlder.setOlderNo(java.net.URLDecoder.decode(bseOlder.getOlderNo(), "UTF-8"));
System.out.println("olderName:" + bseOlder.getOlderName() + " olderNo:" + bseOlder.getOlderNo());
Page<BseOlder> page = bseOlderService.findPage(new Page<BseOlder>(request, response), bseOlder);
model.addAttribute("page", page);
return renderString(response,page.getList());
}
打印出的信息:
olderName:%E5%A5%BD%E4%BA%BA olderNo:olderName:好人 olderNo:过程跟踪:
查询:“好人” 点击提交;
从form表单中序列化数据到formdata olderName=%E5%A5%BD%E4%BA%BA&olderNo= 好人变成 %E5%A5%BD%E4%BA%BA
步骤1中已经进行了一次encode编码,解码decodeURIComponent一次 olderName=好人&olderNo= 好人变成 好人
再一次encode编码 olderName=%25E5%25A5%25BD%25E4%25BA%25BA&olderNo= 好人变成 %25E5%25A5%25BD%25E4%25BA%25BA
提交到后台
后台进行反向操作 接收到的数据 olderName=%25E5%25A5%25BD%25E4%25BA%25BA&olderNo= 封装在bseOlder bean中
信息 进行数据进行URLdecode操作,URldecode操作和encodeURL操作是相反的操作 olderName:%E5%A5%BD%E4%BA%BA olderNo: 好人变成 %E5%A5%BD%E4%BA%BA
再次对信息进行转码 bseOlder.setOlderName(java.net.URLDecoder.decode(bseOlder.getOlderName(), "UTF-8")); 好人变成 好人
到此就完成了前台到后台的信息转码解码之间传递。
相关文章推荐
- Jquery通过Ajax方式提交Form表单
- JQuery 无插件实现seclet option标签的拖拽放置
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 关于jQuery事件绑定
- jQuery按键事件
- 【jQueryUI】利用accordion、tabs与自定义面板布局
- jQuery中的find()与filter()
- jQuery性能优化
- jQuery EasyUI使用教程之创建一个RSS阅读器
- JQuery的核心的一些方法[扒来的]
- jquery实现指定时间内替换指定链接
- jQuery hash
- SeaJS中jQuery插件模块化及其调用方式
- struts、spring、hibernate、ajax、JQuery原理讲解
- js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval
- 点击倒数发短信验证码——疑问2
- jquery和css自定义video播放控件
- jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载
- jquery的ajax同步和异步
- jquery实现ul列表中点击li选择radio