HTML内のJSを介してJSONデータを取得し、インスタンス共有をロードします-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

HTML内のJSを介してJSONデータを取得し、インスタンス共有をロードします

小云云

Jan 05, 2018 am 11:02 AM

html javascript json

反復的なコンテンツロジックを含むページを作成する場合、json データを使用すると、プログラミング効率が大幅に向上し、後のデータメンテナンスが容易になります。そのため、ビデオトピックページでは複数列のビデオデータを表示する必要があるため、jsonを使用することにしました。この記事では主に、JavaScript を通じて JSON を解析してデータを取得し、必要な友人がそれを参照できるように HTML に追加する方法について説明します。

HTMLは以下の通りです(重要な部分のみ表示、JQは引用する必要があります)

<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は以下の通りです

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

ログイン後にコピー

コメント部分は無視しても問題ありません。

まず、新しい json ファイルを作成する必要があります。json ファイルで注意する必要がある問題は、json にはデータ形式の要件があり、URL 内のさまざまな記号を認識できないため、エラーが発生することです。修復しないと、JS プロセスがブロックされ、データが失われます。長い間検索した後、この問題が見つかりました。js ではエラーが報告されません。解決策は、encode メソッドを使用して URL をフォーマットし、それを json に追加することです。また、decode を使用して HTML に変換し直す必要もあります。

2 番目の落とし穴は、HTML を特定のタグに挿入することです。これを逆に使用しないでください。

3 番目の点は、文字列を結合するときにプラス記号を忘れないように注意する必要があります。さらに、JS では小さな問題を見つけるのに時間がかかります。スプライスエラー時にエラーが報告されないため、発見が困難になります。