Detaillierte Erläuterung der Schritte zum Abrufen und Laden von JSON-Daten über JS

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Abrufen und Laden von JSON-Daten über JS geben. Was sind die Vorsichtsmaßnahmen zum Abrufen und Laden von JSON-Daten über JS? Schauen Sie mal rein.

Detaillierte Erläuterung der Schritte zum Abrufen und Laden von JSON-Daten über JS

Beim Schreiben von Seiten mit sich wiederholender Inhaltslogik kann die Verwendung von JSON-Daten die Programmiereffizienz erheblich verbessern und die Aufrechterhaltung der späteren Datenverarbeitung erleichtern . Daher müssen auf der Videothemenseite mehrere Spalten mit Videodaten angezeigt werden, und ich habe mich für die Verwendung von JSON entschieden.

Der HTML-Code lautet wie folgt (nur die wichtigsten Teile werden angezeigt, JQ muss zitiert werden)

<p class="container-fluid content ">
    <p class="container neirong">
      <p class="left fl">
        <p class="title">
          热门视频
        </p>
        <p class="medialist">
        </p>
      </p></p>
</p>

JS ist wie folgt

<script>
    $(document).ready(function(){
      console.log(1111)
   $.getJSON('data.json',function(data){         
            console.log(222)
          var mediahtml="";
          $.each(data,function(i,data) {
          mediahtml+='<p class="media">'+
          '<p class="media-left">'+
          '<a data-toggle="modal" data-target="#myModal">'+
          '<img class="media-object" src="&#39;+data["imgsrc"]+
          &#39;" alt="">'+
            '</a>'+'</p>'+
            '<p class="media-body">'+
            '<p class="title">'+
              '<span class="classify">'+
                data["classify"]+
              '</span>'+
              '<span class="titlename media-heading">'+
                data['titlename']+
              '</span>'+
            '</p>'+
            '<span class="time">'+
              '<span class="glyphicon glyphicon-time"></span> '+
              '<span>'+data['pubdate']+'</span>'+
            '<p>'+data["intro"]+'</p>'+
            '<p 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>'+
            '</p>'+
          '</p>'+
            
          '<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
            '<p class="modal-dialog" role="document">'+
              '<p class="modal-content">'+
                '<p class="modal-header">'+
                  '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                    '<span aria-hidden="true">×</span>'+
                  '</button>'+
                '</p>'+
                '<p class="modal-body"></p>'+
            '</p>'+
          '</p>'+
          '</p>'
//          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>

Sie müssen den Anmerkungsteil nicht lesen, er hat keinen Einfluss auf den Inhalt.

Erstellen Sie zunächst eine neue JSON-Datei. Das Problem, das bei der JSON-Datei beachtet werden muss, besteht darin, dass JSON Anforderungen an das Datenformat stellt und verschiedene Symbole in der URL nicht erkennt , der JS-Prozess wird blockiert, was dazu führt, dass die Daten auf der Seite verloren gehen. Ich habe lange nach diesem Problem gesucht, und das JSON-Problem meldet keinen Fehler in js . Die Lösung besteht darin, die URL mit der Encode-Methode zu formatieren und sie dann zu JSON hinzuzufügen. Sie sollten auch Decode verwenden, um sie wieder in HTML zu konvertieren.

Die zweite Gefahr besteht darin, HTML in ein bestimmtes Tag einzufügen. Es gibt vier Methoden, die Sie verwenden können, um dies zu erreichen.

Der dritte Punkt ist, dass Sie beim Spleißen der Zeichenfolge nicht vergessen müssen. Wenn eines fehlt, wird es lange dauern, ein kleines Problem zu finden. Darüber hinaus meldet JS beim Zusammenführen von Fehlern keinen Fehler.

Oben erfahren Sie, wie Sie JSON-Daten abrufen und laden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die JS- und Ajax-Same-Origin-Strategie in Projekten

So implementieren Sie die Trajektorienwiedergabe auf Leinwand

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Abrufen und Laden von JSON-Daten über JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!