집 >백엔드 개발 >PHP 튜토리얼 >html로 JS를 통해 JSON 데이터를 얻고 인스턴스 공유를 로드합니다.

html로 JS를 통해 JSON 데이터를 얻고 인스턴스 공유를 로드합니다.

小云云원래의: 2018-01-05 11:02:312652검색

반복적인 콘텐츠 로직이 포함된 페이지를 작성할 때 json 데이터를 사용하면 프로그래밍 효율성이 크게 향상되고 나중에 데이터 유지 관리가 용이해집니다. 따라서 동영상 주제 페이지에는 여러 개의 동영상 데이터 열을 표시해야 하는데, 저는 json을 사용하기로 했습니다. 이번 글에서는 주로 자바스크립트를 통해 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 프로세스가 차단되고 데이터가 손실됩니다. 오랫동안 검색한 결과 이 문제가 발견되었으며 json 문제에서는 js에서 오류가 보고되지 않습니다. 해결 방법은 encode 메서드를 사용하여 URL 형식을 지정한 다음 json에 추가하는 것입니다. 또한 html로 다시 변환하려면 decode를 사용해야 합니다.

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

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

html로 JS를 통해 JSON 데이터를 얻고 인스턴스 공유를 로드합니다.

관련 기사