<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
        問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
        當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

        html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法

        來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:24:32
        文檔

        html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法

        html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法:在寫(xiě)內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí),用json數(shù)據(jù)可以顯著提高編程效率,并且便于后期的數(shù)據(jù)維護(hù)。因此,在視頻專(zhuān)題頁(yè)面,需要展示多列視頻數(shù)據(jù),我選擇了用json。 HTML如下(只展示重點(diǎn)部分,需要引用JQ) <div class=container-fluid conten
        推薦度:
        導(dǎo)讀html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法:在寫(xiě)內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí),用json數(shù)據(jù)可以顯著提高編程效率,并且便于后期的數(shù)據(jù)維護(hù)。因此,在視頻專(zhuān)題頁(yè)面,需要展示多列視頻數(shù)據(jù),我選擇了用json。 HTML如下(只展示重點(diǎn)部分,需要引用JQ) <div class=container-fluid conten

        在寫(xiě)內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí),用json數(shù)據(jù)可以顯著提高編程效率,并且便于后期的數(shù)據(jù)維護(hù)。因此,在視頻專(zhuān)題頁(yè)面,需要展示多列視頻數(shù)據(jù),我選擇了用json。

        HTML如下(只展示重點(diǎn)部分,需要引用JQ)

        <div class="container-fluid content ">
         <div class="container neirong">
         <div class="left fl">
         <div class="title">
         熱門(mén)視頻
         </div>
         <div class="medialist">
         </div>
         </div></div>
        </div>

        JS如下

        <script>
         $(document).ready(function(){
         
         console.log(1111)
         
         $.getJSON('data.json',function(data){
         
         console.log(222)
         
         
         
         var mediahtml="";
         
         $.each(data,function(i,data) {
         
         
         
         mediahtml+='<div class="media">'+
         '<div class="media-left">'+
         '<a data-toggle="modal" data-target="#myModal">'+
         '<img class="media-object" src="'+data["imgsrc"]+
         '" alt="">'+
         '</a>'+'</div>'+
         '<div class="media-body">'+
         '<div class="title">'+
         '<span class="classify">'+
         data["classify"]+
         '</span>'+
         '<span class="titlename media-heading">'+
         data['titlename']+
         '</span>'+
         '</div>'+
         '<span class="time">'+
         '<span class="glyphicon glyphicon-time"></span> '+
         '<span>'+data['pubdate']+'</span>'+
         '<p>'+data["intro"]+'</p>'+
         '<div class="guest">'+
         '<span class="jia">嘉</span>'+
         '<span class="name">'+data["name"]+'</span>'+
         '<span class="position">'+data["position"]+'</span>'+
         '<span class="glyphicon glyphicon-eye-open"></span>'+
         '<span class="click-rite"></span>'+
         '</div>'+
         '</div>'+
         
         '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
         '<div class="modal-dialog" role="document">'+
         '<div class="modal-content">'+
         '<div class="modal-header">'+
         '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
         '<span aria-hidden="true">×</span>'+
         '</button>'+
         '</div>'+
         '<div class="modal-body"></div>'+
         '</div>'+
         '</div>'+
         '</div>'
        
         
         
         
        // var url_mobi=data.url_mobi;
        // var url_pc=data.url_pc;
        // if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
        // $('.modal-body').prepend(url_mobi);
        // }else{
        // $('.modal-body').prepend(url_pc);
        // }
        // 
        // 
         })
         
         $('.medialist').after(mediahtml); 
         
         
         })
         
         
         })
         
        
        
         $('#myModal').on('shown.bs.modal', function (e) {
         // 關(guān)鍵代碼,如沒(méi)將modal設(shè)置為 block,則$modala_dialog.height() 為零 
         $(this).css('display', 'block');
         var modalHeight = $(window).height() / 2 - $('#myModal .modal-dialog').height() / 2;
         $(this).find('.modal-dialog').css({
         'margin-top': modalHeight
         });
         });
        
        
         //點(diǎn)擊預(yù)覽圖時(shí)判斷
        // $('.modal').on('click', function () {
        // if ($('#myModal').css("display") == "none") {
        // $('.modal-body').children('iframe').attr('src', '');
        // } else {
        // $('.modal-body').children('iframe').attr('src',
        // 'https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0');
        // }
        // })
         
         </script>
         

        注釋部分可不看,不影響內(nèi)容。

        首先要新建json文件,json文件需注意的問(wèn)題是:json對(duì)數(shù)據(jù)格式有要求,不識(shí)別url中的各類(lèi)符號(hào),因此會(huì)提示錯(cuò)誤,如果不修復(fù),則會(huì)阻斷JS進(jìn)程,造成數(shù)據(jù)在頁(yè)面不顯示,這個(gè)問(wèn)題我找了好久才發(fā)現(xiàn),而且json問(wèn)題在js中不會(huì)報(bào)錯(cuò)。解決辦法是利用encode方法,格式化url,然后再添加進(jìn)json即可,在html中應(yīng)該還要用decode轉(zhuǎn)回來(lái)。

        第二個(gè)坑是插入html到某個(gè)標(biāo)簽中,有四個(gè)方法,用after就可以實(shí)現(xiàn),不要用反了。

        第三點(diǎn)是需要注意,不要在拼接字符串的時(shí)候忘掉加號(hào),少一個(gè)就會(huì)出問(wèn)題,一個(gè)小問(wèn)題會(huì)找好久才發(fā)現(xiàn),而且拼接錯(cuò)誤JS不會(huì)報(bào)錯(cuò),很難發(fā)現(xiàn)。

        聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法

        html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法:在寫(xiě)內(nèi)容邏輯重復(fù)性的頁(yè)面時(shí),用json數(shù)據(jù)可以顯著提高編程效率,并且便于后期的數(shù)據(jù)維護(hù)。因此,在視頻專(zhuān)題頁(yè)面,需要展示多列視頻數(shù)據(jù),我選擇了用json。 HTML如下(只展示重點(diǎn)部分,需要引用JQ) <div class=container-fluid conten
        推薦度:
        標(biāo)簽: 數(shù)據(jù) js html
        • 熱門(mén)焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門(mén)推薦

        專(zhuān)題
        Top
        主站蜘蛛池模板: fc2免费人成为视频| 亚洲乱色伦图片区小说 | 亚洲av无码一区二区三区乱子伦| 边摸边吃奶边做爽免费视频网站| 日本a级片免费看| 国产午夜亚洲精品不卡免下载 | 特黄特色的大片观看免费视频| www.亚洲精品.com| fc2成年免费共享视频18| 亚洲美女又黄又爽在线观看| 国产精品免费观看调教网| 亚洲视频免费播放| 国产精品久久久久久久久久免费| 亚洲熟女www一区二区三区| 免费看小12萝裸体视频国产| 人妻巨大乳hd免费看| 亚洲国产精品福利片在线观看| 69视频在线是免费观看| 亚洲人成无码网站在线观看| 可以免费观看一级毛片黄a| 你是我的城池营垒免费看| 亚洲视频免费播放| 国产又长又粗又爽免费视频| 国产免费MV大全视频网站| 亚洲精品中文字幕无码AV| 免费高清在线影片一区| 亚洲精品视频免费| 亚洲日本一区二区| 日本高清免费aaaaa大片视频| 国产精品成人69XXX免费视频| 亚洲网站在线播放| www国产亚洲精品久久久| 久久久久久AV无码免费网站 | 亚洲人xxx日本人18| 亚洲AV无码成H人在线观看| 最近2019中文字幕免费直播| 国产成人亚洲精品91专区高清| 亚洲av综合色区| 四虎永久免费影院在线| 精品熟女少妇av免费久久| 色婷婷精品免费视频|