前言-URL中的中文变成%百分号字符
在项目中遇到一个bug,在A页面中对某个按钮设置了事件监听,当点击后经过一系列的处理,会调用windos.open()方法,传入的URL大概为:/abc/abc?id=1&key=测试,然后跳转到B页面。
在新页面数据渲染阶段会根据页面参数进行get请求,发现请求出错,打开浏览器开发者工具中的Network发现get请求变成了:
http:xxx:xxx/abc/abc?id=1&key=%E6%B5%8B%E8%AF%95
可以发现问题就出在这里,在B页面获取URL中的参数时就已经被转码了。
问题解决-decodeURI
发现问题就对症解决,既然是在get请求的时候参数出问题,那我们在get请求之前将数据转码回中文即可。
首先是看数据格式,这里被转码的是UTF-8编码,而JavaScript中是自带有UTF-8编码和转码的方法的,也是专门用来负责对URL编码的方法,分别是:encodeURI()和decodeURI()。
var str = '测试'
var str_utf8 = encodeURI(str)
console.log(str_utf8) // %E6%B5%8B%E8%AF%95
console.log(decodeURI(str_utf8)) // 测试
对这两个方法感兴趣的朋友可以深入学习了解下,MDN链接:encodeURI, decodeURI
总结
这次是对bug解决的一次记录。同事也让我感受到一个良好的网络知识和编码知识这些偏底层的基础知识,所带来对于解决问题的好处。
本文参考了:URL汉字编码问题以及乱码解决