关于将URL中的特殊字符进行转码和解码

4 篇文章 0 订阅

当前开发中,遇到特殊情况: 使用url进行跨页面(跨域)传值的时候,会出现某些带特殊字符的url,在浏览器上被处理了,例如:

后端传给前端的跳转路径:

http://127.0.0.1:8088/harbor/sign-in?userName=admin&userPassword=1Qaz2wsx#

浏览器跳转时浏览器地址栏的url变成:

http://127.0.0.1:8088/harbor/sign-in?userName=admin&userPassword=1Qaz2wsx

注意:末尾处的#不见了

还有其他情况,如url中的参数有 "/" "&" "@" "&" 特殊字符时,url都会出现错误...

解决方案: 使用URL的编码和解码 对 特殊字符进行处理

1. java 后端的解决:

方法解释
URLEncoder.encode(String s, String enc) 

编码

s - 要转换的 String。
enc - 所支持的字符编码名称。

URLEncoder.decode(String s, String enc) 

解码

s - 要转换的 String。
enc - 所支持的字符编码名称。

 

对 String 编码时,使用以下规则:

 

  • 字母数字字符 "a" 到 "z"、"A" 到 "Z" 和 "0" 到 "9" 保持不变。
  • 特殊字符 "."、"-"、"*" 和 "_" 保持不变。
  • 空格字符 " " 转换为一个加号 "+"。
  • 所有其他字符都是不安全的,因此首先使用一些编码机制将它们转换为一个或多个字节。然后每个字节用一个包含 3 个字符的字符串 "%xy" 表示,其中 xy 为该字节的两位十六进制表示形式。推荐的编码机制是 UTF-8。但是,出于兼容性考虑,如果未指定一种编码,则使用相应平台的默认编码。

例如,使用 UTF-8 编码机制,字符串 "The string ü@foo-bar" 将转换为 "The+string+%C3%BC%40foo-bar",因为在 UTF-8 中,字符 ü 编码为两个字节,C3 (十六进制)和 BC (十六进制),字符 @ 编码为一个字节 40 (十六进制)。

//
        String str = "1Qaz2wsx#";
        try {
            String encode = URLEncoder.encode(str, "utf-8");//编码
            System.out.println(encode);
            String decode = URLDecoder.decode(encode, "utf-8");//解码
            System.out.println(decode);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

//显示:
1Qaz2wsx%23
1Qaz2wsx#

 后端特殊处理后,传给前端的url变为:

http://127.0.0.1:8088/harbor/sign-in?userName=admin&userPassword=1Qaz2wsx%23

2. js 前端的解决

方法解释
encodeURIComponent(str);

编码

str- 要转换的 String。

decodeURIComponent(str);

解码

str - 要转换的 String。

例如:

var password = decodeURIComponent("1Qazwsx%23");
console.log(password);

//显示结果  1Qazwsx#

 其他的变法解码方式:

示例(摘自W3School):

1 escape()

<script type="text/javascript">
document.write(escape("Visit W3School!") + "<br />")
document.write(escape("?!=()#%&"))
</script>

输出结果:

Visit%20W3School%21
%3F%21%3D%28%29%23%25%26


2 encodeURI()

<html>
<body>
<script type="text/javascript">
document.write(encodeURI("http://www.w3school.com.cn")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/")+ "<br />")
document.write(encodeURI(",/?:@&=+$#"))
</script>
</body>
</html>

输出结果:

http://www.w3school.com.cn
http://www.w3school.com.cn/My%20first/
,/?:@&=+$#

对整个URL进行编码,而URL的特定标识符不会被转码。

3  encodeURIComponent()

<script type="text/javascript">
document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write("<br />")
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))
document.write("<br />")
document.write(encodeURIComponent(",/?:@&=+$#"))
</script>

输出结果:

http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23

对URL中的参数进行编码,因为参数也是一个URL,如果不编码会影响整个URL的跳转。

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值