需求:当我们传输或者存储含有中文的字符串到某些地方时可能会出现字符串乱码或未可知问题的情况,所以在最小改动的情况下解决问题

场景:向Cookie中存储中文是不建议的

技术:使用JS提供的encodeURIComponent() 函数可把字符串作为 URI 组件进行编码

使用JS提供的decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

两者使用的是UTF-8字符集

实现:

案例如下

var afterEncode = encodeURIComponent("中国,五千年文化古国!");

console.log(afterEncode);var afterDecode =decodeURIComponent(afterEncode);

console.log(afterDecode);

运行结果

技术说明:

以下内容摘自:CSDN

encodeURI 、encodeURIComponent 以及中文乱码问题

关于前端:

encodeURIComponent(),  对文本框的输入值进行编码,特殊字符编码结果是%加上这些符号的ASCII码十六进制对照表。

encodeURI() 将整个url编码,但不会对如下字符进行编码  @#$&=.:/;?+ ,这些符号的基本上就是http URL中的特殊符号,是不进行编码的。

@

#

网页中的一个位置

+

$

两种方式的关系及区别:

无论上述哪一种,都不会对[a-zA-Z0-9]的字符以及 ! * ( ) '. 进行编码,即编码之后还是本身。

这两种编码方式对中文的编码结果是一致的。

encodeURL()不会进行编码的字符,基本都是httpURL中的预留符号。所以,encodeURIComponent()是一定会去对这些符号进行编码的,以免对URL造成干扰。

一些常用的编码结果: (底色部分是encodeURL不编码的字符)

原值encodeURIComponentencodeURI

%

%25

%25

空格

%20

%20

&

%26

&

=

%3D

=

/

%2F

/

@

%40

@

;

%3B

;

$

%24

$

:

%3A

:

+

%2B

+

%3F

?

#

%23

#

中文

%E4%B8%AD%E6%96%87

%E4%B8%AD%E6%96%87

关于后端:

前端传值有2种方式,GET和POST。

一 、POST方式传值中文不会产生乱码问题

JSP 页面有pageEncoding="UTF-8",进行编码设置;

web.xml中的 filter 会进行字符编码设置,进行request.setCharacterEncoding("utf-8")操作。

二、GET方式

1. 乱码的产生和解决

大多数的中文乱码是通过GET方式产生的,只因GET方式有自动解码操作。相当于执行代码:

URLDecoder.decode("%E6%B1%89%E5%AD%97", "编码方式")

tomcat的配置文件server.xml中,如果不配置解码方式,就会按照默认的ISO-8859-1编码进行解码。具体参照tomcat的文档。

URIEncoding:This specifies the character encoding used to decode the URI bytes, after %xx decoding the URL. If not specified, ISO-8859-1 will be used.

即服务端就会默认执行 URLDecoder.decode("%E6%B1%89%E5%AD%97", "ISO-8859-1"),即UTF-8编码,ISO解码,就会出现乱码。其中,%E6%B1%89%E5%AD%97 是前端 encodeURI("汉字")  的结果,此函数使用UTF-8编码。

所以,应该在这里增加 URIEncoding="UTF-8" 的配置,避免乱码。

2.乱码时的问号?

前端处理汉字时用的encodeURI是按照UTF-8方式进行编码,而此种编码方式是一个汉字占3字节。

而通过request取到的参数默认是通过ISO-8859-1的方式进行解码,找到就显示?了,并且是3倍于汉字的个数。

3.通过两次 encodeURI 也可以解决乱码问题

a . 将“汉字”通过encodeURI或者 encodeURIComponent 编码一次,会得到字符串 %E6%B1%89%E5%AD%97(6字节),此字符串使用UTF-8编码的,如果此时用ISO-8859-1解码,在ISO-8859-1的编码表中找不到“E6”等字段对应的字符,所以是6个问号。

b . 第二次编码时,相当于对非中文字符 %E6%B1%89%E5%AD%97 进行编码,此时服务端无论用哪种解码方式,都将得到 %E6%B1%89%E5%AD%97 字符,可以正确还原 。

c . 这样,再通过UTF-8 解码该字符,就可以得到“汉字”了。

即执行 URLDecoder.decode("%E6%B1%89%E5%AD%97", "UTF-8") 方法。

js uri解码_JS——URI编码和解码相关推荐

  1. Js对字符串进行base64编码和解码,中文报错:Failed to execute ‘btoa‘ on ‘Window‘: The string to be encoded contains cha

    我最早使用的是atob和btoa这两个函数,但是会出现报错. 直接使用封装好的方法: /*** 编码base64*/ function Encode64(str) {return btoa(encod ...

  2. php 64位编码解码,php base64 编码和解码

    /** * 自定义规则方式编码和解码 **/ public function test_changinttoStr () { $intvalue1 = 1232344234; $intStr = '' ...

  3. 二十六、python中字符串的编码与解码,utf-8编码与解码,gbk编码与解码

    在python中,我们经常会使用到字符串的编码与解码,推荐你在写代码的过程中都用utf-8编码解码 1.utf-8编码用函数encode,例子,编码英文跟数字的时候,他只是在前面多了个b,编码中文的时 ...

  4. Java:base64编码与解码和URL编码与解码

    public class SimpleTest {public static void main(String[] args) throws Exception {String str = " ...

  5. 用js实现基于Base64的数据或者图片的编码与解码

    背景: 公司需要对接第三方的合作商,需要跳转至对方的网站,使用get请求访问对方链接直接跳转,get请求会直接暴露登陆的用户名和密码,我们采用base64编码,对用户信息进行保护. 常用的base64 ...

  6. escape、encodeURI 、encodeURIComponent 编码与解码

    JS escape.encodeURI .encodeURIComponent 编码与解码 本文讨论如何对传递参数用JS编码与解码 1:编码与解码方法的对应关系 escape ------------ ...

  7. socket介绍--数据的编码与解码

    socket 介绍 思考 不同电脑上的进程之间如何通信? 首先通过 IP 地址找到网络中对应的电脑,然后通过传输协议和端口号来确定这个进程(运行起来 的软件),那么数据如何传输需要使用 socket ...

  8. 音视频同步原理解析;音频编码和解码原理

    视频流中的DTS/PTS到底是什么? DTS(解码时间戳)和PTS(显示时间戳)分别是解码器进行解码和显示帧时相对于SCR(系统参考)的时间戳.SCR可以理解为解码器应该开始从磁盘读取数据时的时间. ...

  9. 全网最全面、全详细的编码、解码知识!!!

    文章标题 一: 编码江湖之初恩怨 二: 编码江湖之"乱码"家族 三: 江湖规则之基础知识 Bit(位) Byte(字节) 字符 字符集 字符编码 字符集与字符编码的区别 查看电脑默 ...

最新文章

  1. TOP语句与Order By语句
  2. 日请求亿级的QQ会员AMS平台PHP7升级实践
  3. java增强型for循环(三种遍历集合方式)
  4. Netty 实现 websocket
  5. [Spark][Python]PageRank 程序
  6. mysql开启查看慢查询日志[转]
  7. 七十四、完成Vue项目城市详细页,并实现打包
  8. C++编程积累——C++实现十进制与十六进制之间的互相转换
  9. jQuery 的属性操作方法
  10. shiro密码正确也会匹配错误_智能商贸-Shiro
  11. Facebook 面向个性化推荐系统的深度学习推荐模型
  12. Silverlight 2.5D RPG游戏技巧与特效处理:(十八)开场卷轴与动态窗口
  13. 【转】模块(configparser+shutil+logging)
  14. MySQL/MariaDB/Percona数据库升级脚本
  15. python基础--字典
  16. 推荐一款DataGridView的打印解决方案
  17. 压缩软件能否加上忽略某些目录的功能
  18. tomcat、redis session共存配置
  19. 工程师的爱情故事之1:大发明家
  20. python test suite什么意思_如何:在python中设置testsuite

热门文章

  1. 吊炸天!11款APP完整源码!
  2. 狂拽酷炫新体验!技嘉凤凰版B85装机实战
  3. 潇洒郎:Python 在windows 下使用Redis
  4. Archicad二次开发——创建辅助元素
  5. 菜鸟学源码之Nacos v1.1.3源码学习-Client模块(2):NacosConfigService
  6. 让minidlna支持rmvb格式电影
  7. 出现Error: must call SetScrollSizes() or SetScaleToFitSize()
  8. day01第一章_Linux_基础讲义
  9. Cat.1火了?它是从哪来的?
  10. 16进制数与浮点数转换