快捷導(dǎo)航

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

更新時(shí)間：2017年11月30日 08:37:03 投稿：laozhang

本篇內(nèi)容主要給大家講了如何通過(guò)javascript解析JSON并得到數(shù)據(jù)后添加到HTML中的方法，需要的朋友參考下。

在寫(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">&times;</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)。

以上就是獲取JSON數(shù)據(jù)并加載的方法。