JS获取JSON数据并加载

转自：https://www.jb51.net/article/129401.htm

在写内容逻辑重复性的页面时，用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数据并加载的方法。

 

 

$('#XXX').html("");

$('#XXX').append(mediahtml);