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);
    }

猜你喜欢

转载自www.cnblogs.com/webwangjie/p/11331092.html