Obtenez des données JSON via JS en HTML et chargez le partage d'instance

Lors de l'écriture de pages avec un contenu et une logique répétitifs, l'utilisation de données json peut améliorer considérablement l'efficacité de la programmation et faciliter la maintenance ultérieure des données. Par conséquent, sur la page du sujet vidéo, plusieurs colonnes de données vidéo doivent être affichées et j'ai choisi d'utiliser json. Cet article vous explique principalement comment analyser JSON via javascript et obtenir les données, puis les ajouter au HTML. Les amis dans le besoin peuvent s'y référer.

Le HTML est le suivant (seules les parties clés sont affichées, JQ doit être cité)

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

Le JS est le suivant

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

Vous pouvez ignorer la partie commentaire et cela n'affectera pas le contenu.

Tout d'abord, créez un nouveau fichier json. Le problème auquel vous devez faire attention avec les fichiers json est que json a des exigences en matière de format de données et ne reconnaît pas divers symboles dans l'URL, une erreur sera donc générée. S'il n'est pas réparé, le processus JS sera bloqué, ce qui empêchera les données de s'afficher sur la page. Il m'a fallu beaucoup de temps pour trouver ce problème, et le problème json ne signalera pas d'erreur dans js. La solution consiste à utiliser la méthode encode pour formater l'URL, puis à l'ajouter à json. Vous devez également utiliser decode pour la reconvertir en HTML.

Le deuxième piège est d'insérer du HTML dans une certaine balise. Vous pouvez utiliser after pour le faire. Ne l'utilisez pas dans l'autre sens.

Le troisième point est que vous devez faire attention. N'oubliez pas le signe plus lors de l'épissage des cordes. S'il en manque un, il faudra beaucoup de temps pour trouver un petit problème. De plus, JS ne signalera pas d'erreur lors des erreurs d'épissage. C'est très difficile à découvrir.

Recommandations associées :

Explication détaillée de la façon d'utiliser AngularJS pour obtenir des données json

Méthode JS de lecture et d'analyse des données JSON

🎜 >

Partagez l'interface de l'application d'écriture php et renvoyez l'instance de données json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!