(H5小程序页面html)页面跳转参数丢失

简介: 在 URL 参数字符串中用 key=value 这种键值对的形式进行传递参数,多个键值对中间用 & 连接。如果在 value 中也存在 & 这个符号的话,不对其进行编码,就会引起歧义,就会发生参数丢失问题。

1.原因

在 URL 参数字符串中用 key=value 这种键值对的形式进行传递参数,多个键值对中间用 & 连接。如果在 value 中也存在 & 这个符号的话,不对其进行编码,就会引起歧义,就会发生参数丢失问题。

2.解决方法(通过encodeURIComponent()和decodeURIComponent()方法来解决)

进行url编码和解码,下面是详细的


URL 的编码和解码

1 什么是 URL


URL(Uniform Resource Locator):统一资源定位符,它是用来表示互联网上的某个资源地址,互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。


URL 一般由三部组成:


协议(或称为服务方式)。

存有该资源的主机 IP 地址(有时也包括端口号)。

主机资源的具体地址。如目录和文件名等。


// 语法格式
// protocol://hostname[:port]/path[?query][#fragment]
// 例子
// http://root@localhost:8080/appname/path?name=admin&password=666#fragment

2 为什么要进行 URL 编码?


在 URL 地址中,不允许出现非 ASCII 字符,如果 URL 地址中需要包含中文字符,就必须对中文字符进行编码(转义)。


在 URL 参数字符串中用 key=value 这种键值对的形式进行传递参数,多个键值对中间用 & 连接。如果在 value 中也存在 & 这个符号的话,不对其进行编码,就会引起歧义。


3.1 escape()(已废弃)


escape() 是对字符串进行编码,不适用于 URI,其中 @*_±./ 被排除在外,不会被编码。


console.log(escape("qaqa666"));  // qaqa666
console.log(escape("你好"));  // %u4F60%u597D
console.log(escape("&&%%"));  // %26%26%25%25
console.log(escape("@*_+-./"));  // @*_+-./
注意:escape() 已经从 Web 标准中删除,这里只是作为了解,虽然现在它还在,但是说不定哪天它就没了。我们进行 URI 编码还是要使用下面两种函数。


3.2 encodeURI() 和 encodeURIComponent()


相同点:都是对 URI 进行编码。


不同点:encodeURI 通常用于转码整个 URI,而 encodeURIComponent 主要是用来转码 URI 的组成部分(?后面的参数部分)。


3.2.1 encodeURI()


encodeURI 会替换除; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #的所有的字符,如下示例:


// encodeURI() 编码
// 不编码
console.log(encodeURI(";,/?:@&=+$-_.!~*'()#"));
// 输出:;,/?:@&=+$-_.!~*'()#
console.log(encodeURI("https://hanyu.baidu.com/?id=1&name=六十六"));
// 输出:https://hanyu.baidu.com/?id=1&name=%E5%85%AD%E5%8D%81%E5%85%AD
// 六十六 被编码为了 %E5%85%AD%E5%8D%81%E5%85%AD
注意:encodeURI 自身无法产生能适用于 HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests,因为 “&”, “+”, 和 “=” 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。encodeURIComponent 这个方法会对这些字符编码。


3.2.2 encodeURIComponent()


encodeURIComponent 会替换除A-Z a-z 0-9 - _ . ! ~ * ' ( )的所有的字符,如下示例:


//encodeURIComponent 编码
// 不编码
console.log(encodeURIComponent("A-Za-z0-9-_.!~*'()"));
// 输出:A-Za-z0-9-_.!~*'()
// 错误用法,不能直接将整个 URI 进行编码
console.log(encodeURIComponent("https://hanyu.baidu.com/?name=六十六"));
// 输出:https%3A%2F%2Fhanyu.baidu.com%2F%3Fname%3D%E5%85%AD%E5%8D%81%E5%85%AD
// 可以看到 :/ 都被编码了
// 正确用法,只对单个参数进行编码
console.log("https://hanyu.baidu.com/?name=" + encodeURIComponent("六十六"));
// 输出:https://hanyu.baidu.com/?name=%E5%85%AD%E5%8D%81%E5%85%AD

为了避免服务器收到不可预知的请求,对任何用户输入的作为 URI 部分的内容都需要用 encodeURIComponent 进行转义,示例如下:


// "https://hanyu.baidu.com/?type=a&name=你好"
// 对于上面这串字符串,key 为 type,而 value 为 a&name=你好,如果我们不用 encodeURIComponent 编码,那么将会出现如下结果
console.log(encodeURI("https://hanyu.baidu.com/?type=a&name=你好"));
// 输出:https://hanyu.baidu.com/?type=a&name=%E4%BD%A0%E5%A5%BD
// 如果服务器端收到数据,这将会变为两个参数,就会引发歧义,所以需要用 encodeURIComponent 进行编码
console.log("https://hanyu.baidu.com/?type=" + encodeURIComponent("a&name=你好"));
// 输出:https://hanyu.baidu.com/?type=a%26name%3D%E4%BD%A0%E5%A5%BD
// 通过对比可以看到 & 被编码为了 %26,这样就能有效解决歧义

4.解码


4.1 unescape()(已废弃)


unescape() 就是将被编码过的字符串重新计算生成,与上文所述的 escape() 对应,这也是已经废弃的函数。


console.log(unescape("qaqa666"));  // qaqa666
console.log(unescape("%u4F60%u597D"));  // 你好
console.log(unescape("%26%26%25%25"));  // &&%
console.log(unescape("@*_+-./"));  // @*_+-./


4.2 decodeURI()


decodeURI 就是将被 encodeURI 编码过的 URI 解码为未编码版本的新字符串。


注意:decodeURI 不能解码那些不会被 encodeURI 编码的内容(例如 "& = + $ #")。
// decodeURI 解码
// 不解码
console.log(decodeURI("&=+$#"));
// 输出:&=+$#
console.log(decodeURI("https://hanyu.baidu.com/?id=1&name=%E5%85%AD%E5%8D%81%E5%85%AD"));
// 输出:https://hanyu.baidu.com/?id=1&name=六十六
// %E5%85%AD%E5%8D%81%E5%85%AD 被解码为了 六十六


4.3 decodeURIComponent()


decodeURIComponent() 就是将被 encodeURIComponent() 编码过的部分 URI 解码为一个统一资源标识符(URI)字符串,处理前的 URI 经过了给定格式的编码。


同样,decodeURIComponent 也不能解码那些不会被 encodeURIComponent 编码的内容。
// decodeURIComponent 解码
// 不解码
console.log(decodeURIComponent("A-Za-z0-9-_.!~*'()"));
// 输出:A-Za-z0-9-_.!~*'()
console.log("https://hanyu.baidu.com/?type=" + decodeURIComponent("a%26name%3D%E4%BD%A0%E5%A5%BD"));
// 输出:https://hanyu.baidu.com/?type=a&name=你好
目录
相关文章
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
724 77
|
12月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
2115 12
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
1406 3
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
简约404错误页面HTML源码
简约404错误页面HTML源码
440 12
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
664 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1085 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
294 34
|
Web App开发 移动开发 小程序
公众号小程序H5网页像素流送UE5模型的方法分享
本文探讨了如何通过像素流送技术在小程序、公众号等平台展示复杂的3D模型(如UE5引擎开发的楼盘模型、数字孪生展厅)。该技术将GPU和CPU算力需求转移到服务器端,使用户侧无需高性能硬件即可流畅体验。通过Webrtc实现实时云渲染,确保毫秒级响应,且兼容多种浏览器。使用点量云流等产品级软件,老项目只需重新打包为EXE格式,即可轻松嵌入H5网页、小程序或公众号中,支持Unity、WebGL等多种3D应用及传统CAD模型。
430 1
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
737 0