json數(shù)據(jù)處理及數(shù)據(jù)綁定

一.json數(shù)據(jù)處理

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷、網(wǎng)站重做改版、播州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為播州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1.json數(shù)據(jù)

{"img":"quizvault_internet_test_banner@2x.png",
"golds":"200",
"praise":"64000",
"tit":"互聯(lián)網(wǎng)給工作帶來(lái)的麻煩",
"tit_describe":"在朋友圈轉(zhuǎn)發(fā)身體被掏空,HR找你深情談話:不想干就走??纯茨阌心男┣闆r?",
"images":[{"name":"quizvault_internet_test_nor.png"},{"name":"quizvault_internet_test_nor.png"},{"name":"quizvault_internet_test_nor.png"},{"name":"quizvault_internet_test_nor.png"}],
"images_tit":[{"name":"自從大家習(xí)慣用微信工作后就要24小時(shí)standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時(shí)standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時(shí)standby"},{"name":"自從大家習(xí)慣用微信工作后就要24小時(shí)standby"}]
}

2.獲取數(shù)據(jù)

數(shù)據(jù)注入:"{{data}}"

3.數(shù)據(jù)處理:

var datas = "{{data}}";
   var data;
   srtjson(datas);
   console.log(data);
   function srtjson(datas) {
    var b = htmlDecode(datas);
    var dataObj = b.substring(1, b.length - 1);
    data = eval("(" + dataObj + ")");
    function htmlDecode(text) {
     var temp = document.createElement("div");
     temp.innerHTML = text;
     var output = temp.innerText || temp.textContent;
     temp = null;
     return output;
    }
   }

4.數(shù)據(jù)綁定

 //把json的key設(shè)為id,通過(guò)遍歷對(duì)象進(jìn)行數(shù)據(jù)綁定
  for(var p in data){ 
      $('#'+p).html(data[p]);
  };
//對(duì)數(shù)組進(jìn)行循環(huán),進(jìn)行綁定并且動(dòng)態(tài)成成html
     for(var i=0;i<data.question_tit.length;i++){
     $('#J_main ul').append('<li><div class="cir">'+data.question_tit[i].name+'</div><span>'+data.question_main[i].name+'</span></li>');
                 }
//動(dòng)態(tài)css進(jìn)行綁定
  $('.banner').css({
   'backgroundImage': 'url('+'images/'+ data.img+')'
  //'backgroundImage': 'url('+'{{resource}}'+ data.img+'?type=web-image'+')'
});

以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持創(chuàng)新互聯(lián)!

網(wǎng)頁(yè)名稱:json數(shù)據(jù)處理及數(shù)據(jù)綁定
網(wǎng)站鏈接:http://www.muchs.cn/article28/gcegcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、軟件開發(fā)、服務(wù)器托管、小程序開發(fā)、ChatGPT、靜態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)