Detailed explanation of the steps to obtain and load JSON data through JS

This time I will give you a detailed explanation of the steps to obtain and load JSON data through JS. What are the precautions for obtaining and loading JSON data through JS? The following is a practical case, let's take a look.

Detailed explanation of the steps to obtain and load JSON data through JS

When writing pages with repetitive content logic, using json data can significantly improve programming efficiency and facilitate later data processing maintain. Therefore, on the video topic page, multiple columns of video data need to be displayed, and I chose to use json.

The HTML is as follows (only the key parts are shown, JQ needs to be cited)

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

JS is as follows

<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>

You don’t have to read the annotation part, it won’t affect the content.

First, you need to create a new json file. The problem you need to pay attention to with the json file is that json has requirements for the data format and does not recognize various symbols in the url, so an error will be prompted. If not repaired, the JS process will be blocked, causing the data to be lost on the page. It is not displayed. I have been looking for this problem for a long time before I found it, and the json problem will not report an error in js. The solution is to use the encode method to format the url, and then add it to json. You should also use decode to convert it back in html.

The second pitfall is to insert html into a certain tag. There are four methods. You can use after to achieve this. Don't use it the other way around.

The third point is that you need to pay attention. Don’t forget the plus sign when splicing

string. One missing one will cause problems. It will take a long time to find a small problem, and JS will not report an error when splicing errors. It is very difficult. Discover.

The above is how to get JSON data and load it.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS and ajax homology strategy in the project

How to implement track playback in canvas

The above is the detailed content of Detailed explanation of the steps to obtain and load JSON data through JS. For more information, please follow other related articles on the PHP Chinese website!