HTMLのJSを介してJSONデータを取得する方法

この記事では主に、JavaScript を通じて JSON を解析してデータを取得し、それを HTML に追加する方法について説明します。必要な友達はそれを参照してください。

繰り返しのコンテンツロジックを含むページを作成する場合、json データを使用するとプログラミング効率が大幅に向上し、後のデータメンテナンスが容易になります。そのため、ビデオトピックページでは複数列のビデオデータを表示する必要があるため、jsonを使用することにしました。

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 lazy"  src="/static/imghwm/default1.png"  data-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 では小さな問題を見つけるのに時間がかかります。スプライスエラー時にエラーが報告されないため、発見が困難になります。

上記はJSONデータを取得してロードする方法です。

上記は私があなたのためにまとめたものです。

関連記事:

QQスペースのフォトアルバム表示をJavaScriptで実装する方法

jsイベントのループ機構について(詳細チュートリアル)

JSのソートアルゴリズム概要について

JS+キャンバスを使用したコーン

以上がHTMLのJSを介してJSONデータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。