解决URL地址中的中文乱码问题的办法


Posted in Javascript onFebruary 10, 2017

解决URL地址中的中文乱码问题的办法

引言: 在Restful类的服务设计中,经常会碰到需要在URL地址中使用中文作为的参数的情况,这种情况下,一般都需要正确的设置和编码中文字符信息。乱码问题就此产生了,该如何解决呢?且听本文详细道来。

1.  问题的引出

   在Restful的服务设计中,查询某些信息的时候,一般的URL地址设计为: get /basic/service? keyword=历史 , 之类的URL地址。 但是,在实际的开发和使用中,确是有乱码情况的发生,在后台的读取keyword信息为乱码,无法正确读取。

2. 乱码是如何产生的?

   由于我们利用URL传递参数这种方式是依赖与浏览器环境中的,也就是说URL及URL中包含的各个key=value格式的传递参数键值对参数是在浏览器地址栏中的处理原理处理相应编码后传递至后台进行解码的。

  由于我们没有进行任何处理,此时javascript请求URL并传参数存在中文时(也就是说输入框中输入中文时),对URL的中文参数进行编码是按照浏览器机制进行编码的。此时编码存在乱码问题。

3. 初次编码, javascript中利用encodeURI()方法进行编码。

   利用encodeURI()在javascript中对中文URL参数进行编码时,“测试”二字会被转换为“%E6%B5%8B%E8%AF%95”。 但是问题依然存在。原因是在编码后的字符串信息,浏览器机制会认为“%”是一个转义字符,浏览器会把地址栏URL中的传递的已转换参数“%”与“%”之间的已转义字符进行处理传递到后台中。这样会造成与实际经过encodeURI()编码后的URL不符,因为浏览器误认为“%”是转义字符字符了,它并未将“%”认为是个普通字符。

4. 二次编码,使用encodeURI

   操作:

encodeURI(encodeURI("/order?name=" + name));

   处理后的URL不在是通过一次 encodeURI()转换后的字符串”%E6%B5%8B%E8%AF%95“,而是经过上一步两层encodeURI()处理URL处理后的字符串”%25E6%B255%258B%25E8%AF%2595“,通过再次编码原有被浏览起解析为转义字符的”%“被再次编码,转换成了普通字符转”%25“。 

     此时前端javascript代码对带有中文的URL编码已经完成,并通过URL传递参数的方式传递到后台等待处理,Action获取到正常转换切无乱码的参数为”%25E6%B255%258B%25E8%AF%2595“,此字符串对应的中文正是我们输入的”测试“二字。

5. 后台如何正确解析中文字符信息?

  进入后台的信息,在经过二次encodeURI()之后,直接读取是无法后去正确的信息的。 需要继续如下处理:

URLDecoder.decode("chinese string","UTF-8")

      URLDecoder的decode(String str,String ecn)方法有两个参数,第一个参数为待解码的字符串,第二个参数为解码时的对应编码。

6.   encodeURI, encodeURIComponent, escape

    6.1  escape()函数

    escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。

   返回值:已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

   说明 :该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。其他所有的字符都会被转义序列替换。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。不会被此方法编码的字符: @ * / +

  6.2 encodeURI() 方法

把URI字符串采用UTF-8编码格式转化成escape格式的字符串。不会被此方法编码的字符:! @ # $& * ( ) = : / ; ? + '

 6.3  encodeURIComponent() 方法

    把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比,这个方法将对更多的字符进行编码,比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话,不能用这个方法来进行编码,否则 / 字符被编码之后URL将显示错误。

不会被此方法编码的字符:! * ( ) '

    因此,对于中文字符串来说,如果不希望把字符串编码格式转化成UTF-8格式的(比如原页面和目标页面的charset是一致的时候),只需要使用escape。如果你的页面是GB2312或者其他的编码,而接受参数的页面是UTF-8编码的,就要采用encodeURI或者encodeURIComponent。

7. 另一种处理URL的中文乱码方案

    请求端的中字符有encodeURI进行一次转码,如:

var url="/ajax?name="+encodeURI(name);

   服务器端代码:

name=new String(name.getBytes("iso8859-1"),"UTF-8");

注: name为获得的字符串,iso8859-1为项目的默认字符编码,如果为中文编码gbk,gb2312等则不用这一步进行处理.

  分析: 经过程序验证,结果可行的。 由此可知,浏览器本身默认的编码方式是iso8859-1的方式,即使使用了encodeURI进行了utf-8编码处理,主要的字符串内容,比如ascii字符和可见字符都还是基于iso8859-1浏览器自身的字符。原因就是这些字符在编码上和UTF-8字符串是重合的。而encodeURI之类的转义函数主要解决,特殊字符%,/之类的字符的转义问题。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
axios基本入门用法教程
Mar 25 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 #Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 #Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 #Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 #Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 #Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 #Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
分层教学实施方案
2014/03/19 职场文书
企业年度评优方案
2014/06/02 职场文书
出国签证在职证明
2014/09/20 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
职代会闭幕词
2015/01/28 职场文书
入党申请书怎么写?
2019/06/21 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android