在写内容逻辑重复性的页面时，用json数据可以显著提高编程效率，并且便于后期的数据维护。因此，在视频专题页面，需要展示多列视频数据，我选择了用json。本文我们就和大家分享从json中读取数据追加到html中的方法，希望能帮助到大家。
html如下（只展示重点部分，需要引用jq）
<p class="container-fluid content ">
<p class="container neirong">
<p class="left fl">
<p class="title">
热门视频
</p>
<p class="medialist">
</p>
</p></p>
</p>
js如下
<script>
$(document).ready(function(){
console.log(1111)
$.getjson('data.json',function(data){
console.log(222)
var mediahtml=;
$.each(data,function(i,data) {
mediahtml+='<p class="media">'+
'<p class="media-left">'+
'<a data-toggle="modal" data-target="#mymodal">'+
'<img class="media-object" src="'+data["imgsrc"]+
'" alt="">'+
'</a>'+'</p>'+
'<p class="media-body">'+
'<p class="title">'+
'<span class="classify">'+
data[classify]+
'</span>'+
'<span class="titlename media-heading">'+
data['titlename']+
'</span>'+
'</p>'+
'<span class="time">'+
'<span class="glyphicon glyphicon-time"></span> '+
'<span>'+data['pubdate']+'</span>'+
'<p>'+data[intro]+'</p>'+
'<p 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>'+
'</p>'+
'</p>'+
'<p class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">'+
'<p class="modal-dialog" role="document">'+
'<p class="modal-content">'+
'<p class="modal-header">'+
'<button type="button" class="close" data-dismiss="modal" aria-label="close">'+
'<span aria-hidden="true">×</span>'+
'</button>'+
'</p>'+
'<p class="modal-body"></p>'+
'</p>'+
'</p>'+
'</p>'
// 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不会报错，很难发现。
效果如下：
相关推荐：
jquery如何从json中读取数据追加到html中
js读取和解析json数据的方法
js如何获取json数组里数组长度的实例
以上就是从json中读取数据追加到html中的详细内容。