透過JS取得JSON資料並載入的步驟詳解

这次给大家带来通过JS获取JSON数据并加载的步骤详解，通过JS获取JSON数据并加载的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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

<p>
    </p><p>
      </p><p>
        </p><p>
          热门视频
        </p>
        <p>
        </p>
      

JS如下

<script>
    $(document).ready(function(){
      console.log(1111)
   $.getJSON(&#39;data.json&#39;,function(data){         
            console.log(222)
          var mediahtml="";
          $.each(data,function(i,data) {
          mediahtml+=&#39;<p class="media">&#39;+
          &#39;<p class="media-left">&#39;+
          &#39;<a data-toggle="modal" data-target="#myModal">&#39;+
          &#39;<img class="media-object lazy"  src="/static/imghwm/default1.png"  data-src="&#39;+data["   imgsrc"]+
          &#39;" alt="">&#39;+
            &#39;&#39;+&#39;&#39;+
            &#39;<p class="media-body">&#39;+
            &#39;<p class="title">&#39;+
              &#39;<span class="classify">&#39;+
                data["classify"]+
              &#39;&#39;+
              &#39;<span class="titlename media-heading">&#39;+
                data[&#39;titlename&#39;]+
              &#39;&#39;+
            &#39;&#39;+
            &#39;<span class="time">&#39;+
              &#39;<span class="glyphicon glyphicon-time"> &#39;+
              &#39;<span>&#39;+data[&#39;pubdate&#39;]+&#39;&#39;+
            &#39;<p>&#39;+data["intro"]+&#39;&#39;+
            &#39;<p class="guest">&#39;+
              &#39;<span class="jia">嘉&#39;+
              &#39;<span class="name">&#39;+data["name"]+&#39;&#39;+
              &#39;<span class="position">&#39;+data["position"]+&#39;&#39;+
              &#39;<span class="glyphicon glyphicon-eye-open">&#39;+
              &#39;<span class="click-rite">&#39;+
            &#39;&#39;+
          &#39;&#39;+
            
          &#39;<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">&#39;+
            &#39;<p class="modal-dialog" role="document">&#39;+
              &#39;<p class="modal-content">&#39;+
                &#39;<p class="modal-header">&#39;+
                  &#39;<button type="button" class="close" data-dismiss="modal" aria-label="Close">&#39;+
                    &#39;<span aria-hidden="true">×&#39;+
                  &#39;&#39;+
                &#39;&#39;+
                &#39;<p class="modal-body">&#39;+
            &#39;&#39;+
          &#39;&#39;+
          &#39;&#39;
//          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))) {
//              $(&#39;.modal-body&#39;).prepend(url_mobi);
//              }else{
//              $(&#39;.modal-body&#39;).prepend(url_pc);
//              }    
              })
          $(&#39;.medialist&#39;).after(mediahtml);        
        }) 
        })
        $(&#39;#myModal&#39;).on(&#39;shown.bs.modal&#39;, function (e) {
          // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零 
          $(this).css(&#39;display&#39;, &#39;block&#39;);
          var modalHeight = $(window).height() / 2 - $(&#39;#myModal .modal-dialog&#39;).height() / 2;
          $(this).find(&#39;.modal-dialog&#39;).css({
            &#39;margin-top&#39;: modalHeight
          });
        });
        //点击预览图时判断
//        $(&#39;.modal&#39;).on(&#39;click&#39;, function () {
//          if ($(&#39;#myModal&#39;).css("display") == "none") {
//            $(&#39;.modal-body&#39;).children(&#39;iframe&#39;).attr(&#39;src&#39;, &#39;&#39;);
//          } else {
//            $(&#39;.modal-body&#39;).children(&#39;iframe&#39;).attr(&#39;src&#39;,
//              &#39;https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0&#39;);
//          }
//        })
    
  </script>

注释部分可不看，不影响内容。

首先要新建json文件，json文件需注意的问题是：json对数据格式有要求，不识别url中的各类符号，因此会提示错误，如果不修复，则会阻断JS进程，造成数据在页面不显示，这个问题我找了好久才发现，而且json问题在js中不会报错。解决办法是利用encode方法，格式化url，然后再添加进json即可，在html中应该还要用decode转回来。

第二个坑是插入html到某个标签中,有四个方法，用after就可以实现，不要用反了。

第三点是需要注意，不要在拼接字符串的时候忘掉加号，少一个就会出问题，一个小问题会找好久才发现，而且拼接错误JS不会报错，很难发现。

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

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

canvas怎么实现轨迹回放

以上是透過JS取得JSON資料並載入的步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！