js对url进行编码和解码

JavaScript014

js对url进行编码和解码,第1张

*** 只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字,才能不经过编码直接用于 URL。

***例如:搜索的中文关键字,复制网址之后再粘贴就会发现该URL已经被转码。

1、escape 和 unescape

原理:对除ASCII字母、数字、标点符号 @  *  _  +  -  .  / 以外的其他字符进行编码。

编码:escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')

 结果:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"

 escape('张')

 结果:"%u5F20"

解码:unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")

 结果:"http://www.baidu.com?name=zhang@xiao@jie&order=1"

 unescape("%u5F20")

 结果:"张"

2、encodeURI 和 decodeURI

原理:返回编码为有效的统一资源标识符 (URI) 的字符串,不会被编码的字符:! @ # $ &* ( ) = : / ? + '

  encodeURI()是Javascript中真正用来对URL编码的函数。

编码:encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1')

 结果:"http://www.baidu.com?name=zhang@xiao@jie&order=1"

解码:decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")

 结果:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"

3、encodeURIComponent 和 decodeURIComponent

原理:对URL的组成部分进行个别编码,而不用于对整个URL进行编码

编码:encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')

结果:"http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"

解码:decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")

 "http://www.baidu.com?name=zhang@xiao@jie&order=1"

js使用jsonencode转码在向前端传递数据的时候,我们经常要把数据按照一定格式传递,如json格式,php中用json_encode来转换,但是这里通常会出现一个问题,那就是如果要转换的数据中包含中文,那么json_encode会自动将其中文字符转换成unicode编码。在调用json_encode 的时候我们可以先用urlencode()把它转换成unicode编码,经过json_encode后,再用urldecode解码,这样就能原样把数据传输到前台。在进行JS开发过程中,尤其是在开发报表时,报表已集成到Web页面中,通过在页面传递参数至报表中时,会发现有时某些参数值,传递到报表中是显示为问号或乱码等等一系列不能正常显示的情况。这是由于浏览器和报表服务器的编码不同,字符多次进行编码转换时出现错误导致字符的显示出现乱码,尤其是中日韩文和特殊字符更容易出现乱码问题。

以开发报表软件FineReport为例,在给报表服务器发送请求之前,对URL或者只对URL里面的参数名字和参数值,进行cjkEncode的编码,该方式兼容了各种不同的字符集,如ISO8859-1、 UTF-8、 GBK、 ENU_JP,尤其对中日韩文的处理采取了统一的方案。

假如有这么一个请求: http://localhost:8080/appWeb/text/hello.jsp?name=join

在jsp页面接收url参数,可以使用这样的方法:

在jsp中可以这样使用:<body>hi,<%=name%></body>

注:<%=name%>不能防御XSS攻击

当然也可以在<body>中使用 ${param.name} 方法来获得,这里的param 是隐含对象,相当于reques.getParameter()方法。如:

此时如果url参数包含中文的话就需要进行转码操作,如下:

英文不需要转码操作,但是建议始终进行转码操作,这样处理起来会方便很多。