Explication détaillée des étapes pour obtenir et charger des données JSON via JS

Cette fois, je vais vous donner une explication détaillée des étapes pour obtenir et charger des données JSON via JS. Quelles sont les précautions pour obtenir et charger des données JSON via JS. Voici un cas pratique, allons-y. jetez un oeil.

Explication détaillée des étapes pour obtenir et charger des données JSON via JS

Lors de l'écriture de pages avec une logique de contenu répétitive, l'utilisation de données JSON peut améliorer considérablement l'efficacité de la programmation et faciliter le traitement ultérieur 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>

JS est le suivant

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

Vous n’êtes pas obligé de lire la partie annotation, cela n’affectera pas le contenu.

Tout d'abord, vous devez créer un nouveau fichier json. Le problème auquel vous devez faire attention avec le fichier json est que json a des exigences concernant le format de données et ne reconnaît pas divers symboles dans l'URL, donc une erreur sera affichée si. non réparé, le processus JS sera bloqué, entraînant la perte des données sur la page. Il ne s'affiche pas. J'ai cherché ce problème depuis longtemps avant de le trouver, et le problème json ne signalera pas d'erreur. en 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 consiste à insérer du HTML dans une certaine balise. Vous pouvez utiliser after pour y parvenir. 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 de la chaîne . 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser la stratégie de même origine JS et ajax dans les projets

Comment implémenter la lecture de trajectoire en toile

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!