欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

通过JS获取JSON数据并加载的步骤详解

程序员文章站 2022-04-23 20:45:24
...
这次给大家带来通过JS获取JSON数据并加载的步骤详解,通过JS获取JSON数据并加载的注意事项有哪些,下面就是实战案例,一起来看一下。

通过JS获取JSON数据并加载的步骤详解

在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护。因此,在视频专题页面,需要展示多列视频数据,我选择了用json。

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不会报错,很难发现。

以上就是获取JSON数据并加载的方法。

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

JS与ajax同源策略在项目中怎样使用

canvas怎么实现轨迹回放

以上就是通过JS获取JSON数据并加载的步骤详解的详细内容,更多请关注其它相关文章!