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\")"}
原始密⽂：
eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX2 数组包裹密⽂后：
["eyJJbWdOYW1lIjoiTUlUU1VCSVNISSIsInVybCI6InVybChcIi9UZW1wbGF0ZS94cHNob3BfY3VycmVudHMvSW1hZ2VzL2xvZ28vTUlUU1VCSVNISS5wbmdcIikifSx7IkltZ05hbWUiOiJOT0siLCJ1cmwiOiJ1cmwoXCIvVGVtcGxhdGUveHBzaG9wX ⼆、请求到了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()
}
})
}
})
vuejson转对象
function ImgInfiniteRolling(begin,speed){
console.log(begin,speed);
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论