Erhalten Sie JSON-Daten über JS in HTML und laden Sie die Instanzfreigabe

Beim Schreiben von Seiten mit logischem und sich wiederholendem Inhalt kann die Verwendung von JSON-Daten die Programmiereffizienz erheblich verbessern und die spätere Datenpflege erleichtern. Daher müssen auf der Videothemenseite mehrere Spalten mit Videodaten angezeigt werden, und ich habe mich für die Verwendung von JSON entschieden. In diesem Artikel erfahren Sie hauptsächlich, wie Sie JSON über Javascript analysieren, die Daten abrufen und sie dann zu HTML hinzufügen. Freunde in Not können darauf zurückgreifen.

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>

Der JS lautet wie folgt

<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" src="&#39;+data["imgsrc"]+
          &#39;" alt="">&#39;+
            &#39;</a>&#39;+&#39;</p>&#39;+
            &#39;<p class="media-body">&#39;+
            &#39;<p class="title">&#39;+
              &#39;<span class="classify">&#39;+
                data["classify"]+
              &#39;</span>&#39;+
              &#39;<span class="titlename media-heading">&#39;+
                data[&#39;titlename&#39;]+
              &#39;</span>&#39;+
            &#39;</p>&#39;+
            &#39;<span class="time">&#39;+
              &#39;<span class="glyphicon glyphicon-time"></span> &#39;+
              &#39;<span>&#39;+data[&#39;pubdate&#39;]+&#39;</span>&#39;+
            &#39;<p>&#39;+data["intro"]+&#39;</p>&#39;+
            &#39;<p class="guest">&#39;+
              &#39;<span class="jia">嘉</span>&#39;+
              &#39;<span class="name">&#39;+data["name"]+&#39;</span>&#39;+
              &#39;<span class="position">&#39;+data["position"]+&#39;</span>&#39;+
              &#39;<span class="glyphicon glyphicon-eye-open"></span>&#39;+
              &#39;<span class="click-rite"></span>&#39;+
            &#39;</p>&#39;+
          &#39;</p>&#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">×</span>&#39;+
                  &#39;</button>&#39;+
                &#39;</p>&#39;+
                &#39;<p class="modal-body"></p>&#39;+
            &#39;</p>&#39;+
          &#39;</p>&#39;+
          &#39;</p>&#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>

Sie können den Kommentarteil ignorieren und er hat keinen Einfluss auf den Inhalt.

Erstellen Sie zunächst eine neue JSON-Datei. Das Problem, auf das Sie bei JSON-Dateien achten müssen, besteht darin, dass JSON Anforderungen an das Datenformat stellt und verschiedene Symbole in der URL nicht erkennt, sodass ein Fehler angezeigt wird . Wenn es nicht repariert wird, wird der JS-Prozess blockiert, was dazu führt, dass die Daten nicht auf der Seite angezeigt werden. Es hat lange gedauert, bis ich dieses Problem gefunden habe, und das JSON-Problem meldet keinen Fehler. 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.

Der dritte Punkt ist, dass Sie beim Spleißen der Saiten nicht vergessen müssen, dass es lange dauern wird, ein kleines Problem zu finden. Darüber hinaus meldet JS beim Spleißen keinen Fehler.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung von AngularJS zum Abrufen von JSON-Daten

JS-Methode zum Lesen und Parsen von JSON-Daten

Teilen Sie über die PHP-Schreib-App-Schnittstelle und die JSON-Dateninstanz zurück

Das obige ist der detaillierte Inhalt vonErhalten Sie JSON-Daten über JS in HTML und laden Sie die Instanzfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!