html中通過JS擷取JSON資料並載入的方法，jsjson

html中通過JS擷取JSON資料並載入的方法，jsjson

在寫內容邏輯重複性的頁面時，用json資料可以顯著提高編程效率，並且便於後期的資料維護。因此，在視頻專題頁面，需要展示多列視頻資料，我選擇了用json。

HTML如下（只展示重點部分，需要引用JQ）

<div class="container-fluid content ">    <div class="container neirong">      <div class="left fl">        <div class="title">          發燒影片        </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) {          // 關鍵代碼，如沒將modal設定為 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          });        });        //點擊預覽圖時判斷//        $('.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>  

注釋部分可不看，不影響內容。

首先要建立json檔案，json檔案需注意的問題是：json對資料格式有要求，不識別url中的各類符號，因此會提示錯誤，如果不修複，則會阻斷JS進程，造成資料在頁面不顯示，這個問題我找了好久才發現，而且json問題在js中不會報錯。解決辦法是利用encode方法，格式化url，然後再添加進json即可，在html中應該還要用decode轉回來。

第二個坑是插入html到某個標籤中,有四個方法，用after就可以實現，不要用反了。

第三點是需要注意，不要在拼接字串的時候忘掉加號，少一個就會出問題，一個小問題會找好久才發現，而且拼接錯誤JS不會報錯，很難發現。

以上就是擷取JSON資料並載入的方法。