html中通过JS获取JSON数据并加载的方法

在写内容逻辑重复性的页面时，用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不会报错，很难发现。