encodeURIComponent(JSON.stringify(data))刷新页面参数无法解析的问题

最新推荐文章于 2024-11-07 11:52:58 发布
原创 最新推荐文章于 2024-11-07 11:52:58 发布 · 2.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #angular

在Angular项目中遇到支付页面URL编码问题，每次刷新URL会增加%25字符。通过使用window.btoa()和window.atob()进行Base64编码和解码，成功解决了这个问题，确保URL在刷新后保持不变。

关于encodeURIComponent和decodeURIComponent

这两个都是对字符进行 编码 和 解码 的函数

一：故事的起点

在今天写一个支付页面的时候(angular项目)，需要将订单的信息通过路由进行传参，在页面初始化是对url进行解析 拿到相关订单信息进行页面的渲染，问题来了，在刷新 页面后url会自动加上%25的字符， 刷新一次多一个，属实给我整无语了。

1.原始url
在这里插入图片描述
2.刷新一次
在这里插入图片描述
3.刷新n次
在这里插入图片描述

好家伙 搁这套娃呢

二：解决办法

两个新api的引入
window.btoa() 和 window.atob()
用于创建base64格式的编码与解码
更多：https://www.runoob.com/jsref/met-win-btoa.html

代码：

window.btoa(unescape(encodeURIComponent(str))) //通过这种方式编码

decodeURIComponent(escape(window.atob(str)))   // 解码

最终效果
在这里插入图片描述

刷新多少次也不会变哦~

coderZengX
关注
JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍
糖果墙的博客
02-21 1350
JS拼接字符串的过程中将JSON对象存到某个标签的属性中JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),bta()用法介绍案例描述实现方法方法1方法2方法3JS拼接li标签，JSON对象转字符串，双引号引发的问题解决方法1：JSON.stringfy()后再使用encodeURIComponent()方法进行编码解决方法2：JSON.stringfy()后再使用btoa()方法进行编码 JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encode
【uniapp】 uniapp如何跳转页面,并携带json数据,再接收数据decodeURIComponent，encodeURIComponent，JSON.stringify，JSON.parse
AAAXiaoApple的博客
05-23 488
【代码】【uniapp】 uniapp如何跳转页面,并携带json数据,再接收数据。
埋点系统的对象参数处理方式【encodeURIComponent、JSON.stringify】
weixin_43837268的博客
04-28 848
//先转化string，再编码转化 let str = encodeURIComponent(JSON.stringify({ transferType: this.transferType, defseats: _defaultSeat.join("&"), defmode: _defaultMode.join("&"), seats: _newSeat.joi.
从前端到后端：如何在 URL 参数中传递 JSON 数据
04-26 1万+
在前端使用 URL 参数传递 JSON 数据时，需要先将 JSON 数据转换为字符串并进行 URL 编码。在后端中解析 URL 参数时，需要先将 URL 编码的字符串解码为原始数据，并将其解析为相应的数据类型。不同的后端语言和框架可能有不同的解析方式，但是基本的原理都是相同的。
微信小程序大坑：encode后的JSON字符串，JSON.parse解析失败
热门推荐
a690197843的博客
11-18 3万+
今天，遇到微信小程序 JSON 解析的一个大坑。 跨页面跳转，想传递一个对象。由于对象中包含 url 属性，所以先使用了 encodeURIComponent 对整个对象的字符串 infoStr 编码。 在模拟器上，JSON.parse 可以将编码的字符串也顺带解码，也就是说，能准确获得传递前的对象！ 但是！！在真机上，JSON.parse 无法识别编码后的字符串，会导致解析失败！！
php unable to decode value,关于php：无法对我使用JSON.stringify()发送的对象进行json_decode解码...
weixin_39940714的博客
03-11 287
我有一个脚本，在JSON.stringify()之后使用AJAX发布大型对象。当我尝试使用json_decode($object, true);在PHP中对其进行解码时，将不会对其进行解码。我的对象看起来像：var object = [{field_name:"Date & Time", some_other_value:"somevalue1"}]我相当确定它与Date & Ti...
encodeURIComponent(JSON.stringify(res.data))怎样解析它的值
03-29
但根据引用2的内容，用户可能遇到了在刷新页面时参数无法解析的问题，这时候可能用到了Base64编码。需要明确用户的数据处理流程是否有额外的编码步骤。 总结用户的问题，正确的解决方法是先解码URI组件，再解析JSON...
encodedData = encodeURIComponent(JSON.stringify(res.data))如何接收使用
最新发布
08-20
在前端开发中，`encodeURIComponent(JSON.stringify(obj))` 常用于将一个 JavaScript 对象编码为 URL 安全的字符串，以便通过 URL 的 query 参数进行传递。 你提到的代码： ```js encodedData = ...
encodeURIComponent和JSON.stringify转码
03-15
### encodeURIComponent 与 JSON.stringify 的转码差异 `encodeURIComponent` 是 JavaScript 中用于对 URI 组件进行编码的方法，它会将字符串中的特殊字符转换为适合在 URL 中使用的百分号序列[^2]。相比之下，`...
window.btoa(unescape(encodeURIComponent(JSON.stringify(data))));
08-12
`var data = window.btoa(unescape(encodeURIComponent(JSON.stringify(item))));` 但是，由于`unescape`已被废弃，我们可以使用另一种方式：使用`TextEncoder`（现代浏览器支持）或者直接使用`btoa`的Unicode...
JSON.stringify函数(JavaScript)
10-22 1769
原文地址：http://technet.microsoft.com/zh-cn/sysinternals/cc836459(v=vs.94) JSON.stringify 函数 JavaScript JSON.stringify 函数 (JavaScript)   将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。  JSON.stringify(valu
[Javascript] encodeURIComponent()方法
weixin_30267697的博客
04-14 915
在vue項目中使用vue-router通过url进行传值 encodeURIComponent encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。encodeURIComponent(URIstring) this.alert = LayDialog.alert({ content: str, okTheme: 'a...
encodeURIComponent转码
vip545058的专栏
03-28 1583
最近在做一个三合结算系统，里面大量运用了jquery，发现很多基本功都忘记了，特此记录一下。 js: var jsonArgs={name:code}; var jsonStr=JSON.stringify(jsonArgs); jsonStr=encodeURIComponent(jsonStr); herf="a.action?args="+jsonStr; 这里将json
vue路由传对象刷新会报错，数据丢失，用json字符串解决
weixin_39818813的博客
10-06 2070
我的订单页面---------》订单详情页面 我的订单页面： encodeURIComponent(JSON.stringify(this.detailMsg))------变成json字符串，且加密 toDetail(index) { request.post('/orderDetails', { orderNo: this.air_ticket[i...
encodeURIComponent和decodeURIComponent的使用场景
m0_61998604的博客
11-07 2448
URL 编码和解码的函数。
【Javascript】encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
zhenshu_guo的博客
04-21 1万+
encodeURI、encodeURIComponent、decodeURI、decodeURIComponent
axios会对url的参数进行encodeURIComponent编码问题
程序员超超的博客
04-28 5799
这里我们使用了paramsSerializer，其实可以看我的第一张图片，buildURL的第三个入参就是paramsSerializer，也就是如果外界传入了paramsSerializer，那么_encode就是paramsSerializer，如果没传_encode就是内置的encode。可以看到axios里面使用的是XHR，也就是ajax，在我画红框的地方有一个buildURL方法，然后把params传入了这个方法，来看一下buildURL具体实现。也就是在使用axios时候，parms的参数是。
JavaScript decodeURIComponent Uncaught URIError: URI malformed
weixin_33958366的博客
01-03 1470
使用 JavaScript 的 decodeURIComponent 方法解码使用 Java 的 URLEncoder.encode 方法编码的字符串时，产生错误：Uncaught URIError: URI malformed 产生错误的原因： 1、是使用 Java 的URLEncoder.encode 方法编码的字符串时使用的方法姿势不对。 2...
【VUE3使用记录】页面及路由刷新
cpsxn的博客
06-08 1万+
整理工作中用到的页面刷新方式 1.provide/inject 2.router.go(0) 3.location.reload 4.重复点击菜单时刷新页面
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值