一、当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 = new Array(); while(ImgUrlArr.length<ImgUrlArrOld.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:
<div id="appVue"> <ul class="img-ul" id="ImgUl"> <!-- 遍历背景图片地址和title,并设置背景图片样式 --> <li class='img-ul-li' v-for='src in src' v-bind:title='src.ImgName' :style='{background: src.url,"background-repeat": backgroundRepeat,"background-position": backgroundPosition,"background-size":backgroundSize}'></li> </ul> </div>
js:
$.ajax({ type: 'get', dataType: 'json', url: '/Template/xpshop_currents/inc/imgUrl.json', cache: false, success: function (data) { //window.atob()base64解码,escape编码,decodeURIComponent解码,这里是为了解决base64解码后的中文乱码问题 let spdata = decodeURIComponent(escape(window.atob(data[0]))); let pat1 = /\[(.*?)]/; let pat2 = /},/g; let pat3 = /;/; //因为json数组加密后变成了一串字符串,所以json数据用另外一个数组包裹了加密后的字符串,否则json资源无法加载,这里先通过pat1的正则把字符串提取出来 let sp = spdata.split(pat1)[0]; //将逗号替换为分号,这样方便等下分割提取数组元素 let spp = sp.replace(pat2,'};'); let ImgUrlArrOld = spp.split(pat3); //生成随机数组 let ImgUrlArr = new Array(); while(ImgUrlArr.length<ImgUrlArrOld.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]);
};
let vm = new Vue({ el:'#appVue', data:{ src:ImgUrlArr, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: '100% 100%', }, // 加载函数 methods:{ ImgInfiniteRolling: function(){ ImgInfiniteRolling(-200,1) }, }, //页面模板加载完成后调用函数 mounted(){ this.ImgInfiniteRolling() } }) } }) function ImgInfiniteRolling(begin,speed){ console.log(begin,speed); }