频道导航

html中通过JS获取JSON数据并加载的方法

2019-01-08 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了html中通过JS获取JSON数据并加载的方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

在写内容逻辑重复性的页面时，用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+='<div class="media"&gt;'+
      '<div class="media-left"&gt;'+
      '<a data-toggle="modal" data-target="#myModal"&gt;'+
      '<img class="media-object" src="'+data["imgsrc"]+
      '" alt=""&gt;'+
        '</a>'+'</div>'+
        '<div class="media-body"&gt;'+
        '<div class="title"&gt;'+
          '<span class="classify"&gt;'+
            data["classify"]+
          '</span>'+
          '<span class="titlename media-heading"&gt;'+
            data['titlename']+
          '</span>'+
        '</div>'+
        '<span class="time"&gt;'+
          '<span class="glyphicon glyphicon-time"&gt;</span> '+
          '<span>'+data['pubdate']+'</span>'+
        '<p>'+data["intro"]+'</p>'+
        '<div class="guest"&gt;'+
          '<span class="jia"&gt;嘉</span>'+
          '<span class="name"&gt;'+data["name"]+'</span>'+
          '<span class="position"&gt;'+data["position"]+'</span>'+
          '<span class="glyphicon glyphicon-eye-open"&gt;</span>'+
          '<span class="click-rite"&gt;</span>'+
        '</div>'+
      '</div>'+

      '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;'+
        '<div class="modal-dialog" role="document"&gt;'+
          '<div class="modal-content"&gt;'+
            '<div class="modal-header"&gt;'+
              '<button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;'+
                '<span aria-hidden="true"&gt;&times;</span>'+
              '</button>'+
            '</div>'+
            '<div class="modal-body"&gt;</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) {
      // 关键<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>，如没将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数据并加载的方法。

原文链接：https://www.f2er.com/js/34941.html

html