解决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 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
vue中路由跳转不计入history的操作
Sep 21 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
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Vue.js用法详解
2017/11/13 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
js实现简单进度条效果
2020/03/25 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python处理html转义字符的方法详解
2016/07/01 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
学习python分支结构
2019/05/17 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
美术社团活动总结
2014/06/27 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
《学会看病》教学反思
2016/02/17 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers