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

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

HTML如下（只展示重点部分，需要引用JQ）

    
      
        
          热门视频
        
        
        
      

JS如下

<script>
    $(document).ready(function(){
      
      console.log(1111)
      
          $.getJSON("data.json",function(data){
            
            console.log(222)
            
            
            
          var mediahtml="";
          
          $.each(data,function(i,data) {
            
        
        
          mediahtml+=""+
          ""+
          ""+
          ""+
            ""+""+
            ""+
            ""+
              ""+
                data["classify"]+
              ""+
              ""+
                data["titlename"]+
              ""+
            ""+
            ""+
              " "+
              ""+data["pubdate"]+""+
            "
"+data["intro"]+"
"+
            ""+
              "嘉"+
              ""+data["name"]+""+
              ""+data["position"]+""+
              ""+
              ""+
            ""+
          ""+
            
          ""+
            ""+
              ""+
                ""+
                  ""+
                    "×"+
                  ""+
                ""+
                ""+
            ""+
          ""+
          ""

            
            
            
//          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数据并加载的方法

http://m.bbyears.com/wangyezhizuo/142863.html

推荐访问: