JS解决url传值出现中文乱码的另类办法


Posted in Javascript onApril 08, 2013

 在开发web应用时,很多情况都需要进行前后台的数据交互,有时候我们可能需要把前台的中文数据通过URL的方式传递到后台,但此时有个令人头疼的问题,因为Java中网络传输使用的标准字符集是ISO-8859-1,所以在后台用request.getParameter("message");获取前台传过来的中文时,得到的还是ISO-8859-1字符集,中文就会出现乱码现象,好多人的解决办法是在前台传递中文之前进行decode,后台再decode一下进行转换,这样感觉很是麻烦,难道就没其他的方式解决吗?

       苦思冥想了一下:为什么用表单的方式就可以传递中文,而URL的方式就不行了呢?非得用URL传值的方式才能解决问题吗?这里我想到了动态表单,何不用它来解决呢,示例如下:

       假设有如下应用场景:KPI列表页面中,对每个KPI都有生成预警数据的功能,当点击列表中每个KPI生成数据的按钮时,需要把KPI的id和name传递到后台。

       前端对应的js方法:

         用URL传值的写法:

           function createData(indexId,indexName){
                     window.location.href="catalogAction.do?action=CreateIndexData&catalogId="+indexId+"&catalogName="+indexName+"&random="+Math.random();
                   }

用这种方法,由于KPI名称大多为中文,在后台接收到的值肯定为乱码。

若用动态生成表单的方式就可以解决:

function createData(indexId,indexName){
               var urlStr =  "catalogAction.do?action=CreateIndexData&PcatalogId=<c:out value='${catalogId}'/>&catalogId="+indexId+"&random="+Math.random();
               var f= document.createElement('form');
               f.action = urlStr;
               f.method = 'post';
               document.body.appendChild(f);
               var temp=document.createElement('input');
               temp.type= 'hidden';
               temp.value=indexName; 
               temp.name='catalogName';
               f.appendChild(temp);
               f.submit();
}

对中文字段用form的方式提交过去,不是中文的仍然用URL传,这样就轻松解决了向后台传递中文出现乱码的情况。
Javascript 相关文章推荐
19个很有用的 JavaScript库推荐
Jun 27 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
JS继承--原型链继承和类式继承
Apr 08 #Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 #Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 #Javascript
javascript中常用编程知识
Apr 08 #Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 #Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 #Javascript
You might like
PHP 面向对象实现代码
2009/11/11 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JAVASCRIPT keycode总结
2009/02/04 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Python操作列表的常用方法分享
2014/02/13 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
python3对接mysql数据库实例详解
2019/04/30 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python多线程和多进程关系详解
2020/12/14 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
九年级物理教学反思
2014/01/29 职场文书
高一数学教学反思
2014/02/07 职场文书
材料员岗位职责
2014/03/13 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
基于python实现银行管理系统
2021/04/20 Python