在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用json。
HTML如下(只展示重点部分,需要引用JQ)
热门视频
JS如下
$(document).ready(function(){
console.log(1111)
$.getJSON('data.json',function(data){
console.log(222)
var mediahtml="";
$.each(data,function(i,data) {
mediahtml+='
'
''+
'
'" alt="">'+
''+'
'
'
''+
data["classify"]+
''+
''+
data['titlename']+
''+
'
''+
' '+
''+data['pubdate']+''+
'
'+data["intro"]+'
'+'
'嘉'+
''+data["name"]+''+
''+data["position"]+''+
''+
''+
'
'
'
'
'
'+'
'
// 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');
// }
// })
注释部分可不看,不影响内容。
首先要新建json文件,json文件需注意的问题是:json对数据格式有要求,不识别url中的各类符号,因此会提示错误,如果不修复,则会阻断JS进程,造成数据在页面不显示,这个问题我找了好久才发现,而且json问题在js中不会报错。解决办法是利用encode方法,格式化url,然后再添加进json即可,在html中应该还要用decode转回来。
第二个坑是插入html到某个标签中,有四个方法,用after就可以实现,不要用反了。
第三点是需要注意,不要在拼接字符串的时候忘掉加号,少一个就会出问题,一个小问题会找好久才发现,而且拼接错误JS不会报错,很难发现。
以上就是获取JSON数据并加载的方法。