在寫內容邏輯重復性的頁面時，用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數據并加載的方法。
新聞熱點
疑難解答
