HTML로 JS를 통해 JSON 데이터를 얻는 방법

이 글에서는 주로 자바스크립트를 통해 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" 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 프로세스가 차단되고 데이터가 손실됩니다. 오랫동안 검색한 결과 이 ​​문제가 발견되었으며 json 문제에서는 js에서 오류가 보고되지 않습니다. 해결 방법은 encode 메서드를 사용하여 URL 형식을 지정한 다음 json에 추가하는 것입니다. 또한 html로 다시 변환하려면 decode를 사용해야 합니다.

두 번째 함정은 html을 특정 태그에 삽입하는 것입니다. after를 사용하면 됩니다.

세 번째 주의할 점은 문자열을 연결할 때 더하기 기호를 잊지 마세요. 하나라도 없으면 문제가 생길 수 있습니다. 접합 오류 시 오류를 보고하지 않아 찾기가 어렵습니다.

위는 JSON 데이터를 가져와서 로드하는 방법입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 글:

자바스크립트를 이용한 QQ 공간 사진첩 표시 구현 방법

js 이벤트의 루프 메커니즘에 대해(자세한 튜토리얼)

JS 정렬 알고리즘에 대해 요약

만드는 방법 JS+캔버스를 사용하는 원뿔

위 내용은 HTML로 JS를 통해 JSON 데이터를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!