码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-08-10 13:37:15      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:rand   index   push   中文乱码问题   nbsp   ons   url   success   while   

        $.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遍历输出

标签:rand   index   push   中文乱码问题   nbsp   ons   url   success   while   

原文地址:https://www.cnblogs.com/webwangjie/p/11331092.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!