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\")"}

 

　　原始密文：

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