<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
        主站蜘蛛池模板: 国产在线国偷精品产拍免费| 久久久久久亚洲精品不卡| 成年女人毛片免费播放视频m| 免费看AV毛片一区二区三区| 亚洲精品美女久久久久99| 精品亚洲成A人无码成A在线观看| 一级毛片高清免费播放| 歪歪漫画在线观看官网免费阅读| 亚洲色精品88色婷婷七月丁香| 亚洲无mate20pro麻豆| 99久久免费国产特黄| 日本牲交大片免费观看| 亚洲福利电影一区二区?| 国产精品无码免费专区午夜| 日本无吗免费一二区| 处破女第一次亚洲18分钟| 嫖丰满老熟妇AAAA片免费看| 亚洲国产精品无码久久一区二区| 蜜臀亚洲AV无码精品国产午夜.| 国产精品久久免费视频| 亚洲а∨天堂久久精品9966| 一级毛片免费观看| 亚洲精品无码久久一线| 国产无遮挡裸体免费视频在线观看| 亚洲国产精品自产在线播放| 亚洲成熟丰满熟妇高潮XXXXX| 可以免费看的卡一卡二| 亚洲欧美日韩一区二区三区 | 亚洲男人天堂av| 久久成人18免费网站| 国产乱子伦精品免费无码专区 | 成人亚洲国产va天堂| 日批日出水久久亚洲精品tv| 国产精品亚洲精品观看不卡| 免费国产小视频在线观看| 久久久亚洲精华液精华液精华液| 国产成人免费高清激情视频| av网站免费线看| 亚洲欧洲国产精品久久| 在线看片无码永久免费视频| 免费大片av手机看片|