url传递中文参数

url传递中文参数

// send.html
var key = '测试'
location.href = `receive.html?key=${key}`
// receive.html
var val =location.search.split('=')[1]
var el = document.getElementById('content')
el.innerText = val;

在这里插入图片描述

通常,如果我们直接将中文写在url中,得到的却是一堆乱码(%E6%B5%8B%E8%AF%95),因为这涉及到编码问题。如果你设置了编码方式为utf-8,则它会将中文编译为英文,如果对应的页面的编码方式也为utf-8,则就直接显示编译后的中文

解决方法:
1.encodeURI/decodeURI

encodeURI 会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列:
在这里插入图片描述

// receive.html
var val =location.search.split('=')[1]
var el = document.getElementById('content')
// decodeURI:将已编码 URI 中所有能识别的转义序列转换成原字符,但不能解码那些不会被 encodeURI 编码的内容(例如 "#")
el.innerText = decodeURI(val);

2.decodeURIComponent/encodeURIComponent
当遇到测试&key=测试这种情况,通过第一种方法就得到了2个键值对,这时encodeURIComponent 就可以发挥它的作用了

encodeURIComponent 轉義除了以下字元外的所有字元:
A-Z a-z 0-9 - _ . ! ~ * ’ ( )

// send.html
var key = "测试&key=测试"
location.href = `receive.html?key=${key}`
location.href = `receive.html?key=${encodeURIComponent(key)}`
// receive.html
var val =location.search.split('=')[1]
var el = document.getElementById('content')
el.innerText = decodeURIComponent(val);

总结:

  1. 参数中如果不存在特殊字符的话,1、2都可以;
  2. 参数中如果存在特殊字符的话,使用2;
  3. 如果是对整个url进行编译,url中有/等特殊字符,不能进行编译,则使用1;
  4. escape和unescape已经被废弃,最好别用

拓展:
如果只是单纯的想传递中文参数,可以通过sessionStorage或localStorage

// send.html
var key = "测试&key=测试"
location.href = `receive.html`
sessionStorage.setItem('key',key)
// receive.html
var val = sessionStorage.getItem('key')
var el = document.getElementById('content')
el.innerText = val;
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值