ajax请求base64加密后的json数组,并通过vue的v-for遍历输出
Posted webwangjie
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax请求base64加密后的json数组,并通过vue的v-for遍历输出相关的知识,希望对你有一定的参考价值。
$.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)]; let numObject = JSON.parse(num); if (ImgUrlArr.indexOf(numObject)<0) ImgUrlArr.push(numObject); 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);
以上是关于ajax请求base64加密后的json数组,并通过vue的v-for遍历输出的主要内容,如果未能解决你的问题,请参考以下文章
前端将图片转换为base64位,使用ajax传递到后台,但是图片经过base64转换成字符串后非常长,无法使用ajax