Comment obtenir des données JSON via JS en HTML

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.

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.

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 ignorez la partie annotation 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.

Ce qui précède explique comment obtenir des données JSON et les charger.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser javascript pour implémenter l'affichage de l'album photo de l'espace QQ

À propos du mécanisme de boucle des événements js (détail tutoriel)

À propos du résumé de l'algorithme de tri JS

Comment créer un cône en utilisant JS+canvas

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!