html中通过JS获取JSON数据并加载的方法
2017-11-30 08:37
821 查看
在写内容逻辑重复性的页面时,用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数据并加载的方法。
相关文章推荐
- html中通过js获取接口JSON格式数据解析以及跨域问题
- html中通过js获取接口JSON格式数据解析以及跨域问题
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
- 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
- html Js跨域提交数据方法,跨域提交数据后台获取不到数据
- 做js时用到的几个方法(获取html的get传值 、动态加载js和css资源)
- js 通过html()及text()方法获取并设置p标签的显示值
- 豆瓣API使用介绍及通过ajax跨域获取url的json数据的方法
- 通过两种方法实现在HTML页面加载完毕后运行某个js
- jquery通过ajax方法获取json数据不执行success
- HTML5之新特性(选择器、class列表属性、JSON新方法、data自定义数据、延迟加载JS)
- js 通过html()及text()方法获取并设置p标签的显示值
- ajax获取数据,应该返回json用js拼接 还是在后台拼接HTML完再返回
- ThinkPHP中通过I方法获取json数据的实现方法
- js获取通过ajax返回的map型的JSONArray的方法
- Android使用webview控件加载本地html,通过Js与后台Java实现数据的传递
- Ajax异步获取html数据中包含js方法无效的解决方法
- 如何将JSON数据通过Get方法获取数据
- Android通过Get方法获取Json数据
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取