ajax base64加密 解码,ajax请求base64加密后的json数组,并通过vue的v-for遍历输出

一、当json数据使用base64加密后,ajax无法直接请求加密后的字符串密文,需要用数组包裹密文

原始json数组内部数据:

备注:原始json本来是用放在一个数组内部的[{"a":"b","c":"d"},{"e":"f","g":"h"}]

{"ImgName":"MITSUBISHI","url":"url(\"/Template/xpshop_currents/Images/logo/MITSUBISHI.png\")"},

{"ImgName":"NOK","url":"url(\"/Template/xpshop_currents/Images/logo/NOK.png\")"}

原始密文:

eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX2N1cnJlbnRzL0ltYWdlcy9sb2dvL05PSy5wbmdcIikifQ==

数组包裹密文后:

["eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX2N1cnJlbnRzL0ltYWdlcy9sb2dvL05PSy5wbmdcIikifQ=="]

二、请求到了json数据后,需要对数据进行解码

window.btoa //base64加密

window.atob //base64解码

如果密文中有中文数据,还需要进行再次编码解码,否则会出现中文乱码

escape()//编码

decodeURIComponent()//解码

三、解码后的明文是字符串String,需要提前字符串数据,并转换为数组

let pat1 = /\[(.*?)]/;

let pat2= /},/g;

let pat3= /;/;//用正则pat1,匹配原始json内容,并通过split把匹配出来的内容变成数组元素,并通过下标获取

let sp = spdata.split(pat1)[0];//用正则pat2,replace将符合条件的逗号替换为分号,方便等下分割提取数组元素,注意正则尾部加g,启用全局匹配

let spp = sp.replace(pat2,'};');//用正则pat3,split按分号将字符串切割成数组,注意此时的数组内容依然是字符串String

let ImgUrlArrOld = spp.split(pat3);

四、JSON.parse将提取出来的数组元素转换为对象(Object)格式,并将数组随机重排

let strToObj =JSON.parse(str)//字符串转对象

let objToStr =JSON.stringify(obj)//对象转字符串

//生成随机数组

let ImgUrlArr = newArray();while(ImgUrlArr.length

let num= ImgUrlArrOld[Math.floor(Math.random() *ImgUrlArrOld.length)];if (ImgUrlArr.indexOf(num)<0) {

ImgUrlArr.push(num);

}

}

//数组内容对象化for (let i = 0; i < ImgUrlArr.length; i++) {

ImgUrlArr[i]=JSON.parse(ImgUrlArr[i]);

};

完整代码:

html:

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值