html 에서 JSON 데 이 터 를 JSON 으로 가 져 오고 불 러 오 는 방법

내용 의 논리 적 중복 성 페이지 를 쓸 때 json 데이터 로 프로 그래 밍 효율 을 현저히 높 일 수 있 고 후기의 데이터 유지 에 편리 하 다.그래서 동 영상 테마 페이지 에서 여러 열 의 동 영상 데 이 터 를 보 여 줘 야 하기 때문에 저 는 제 이 슨 을 선 택 했 습 니 다.
HTML 은 다음 과 같 습 니 다.

<div class="container-fluid content ">
    <div class="container neirong">
      <div class="left fl">
        <div class="title">
              
        </div>
        <div class="medialist">
        </div>
      </div></div>
</div>

JS 는 다음 과 같 습 니 다.

<script>
    $(document).ready(function(){
      
      console.log(1111)
      
          $.getJSON('data.json',function(data){
            
            console.log(222)
            
            
            
          var mediahtml="";
          
          $.each(data,function(i,data) {
            
        
        
          mediahtml+='<div class="media">'+
          '<div class="media-left">'+
          '<a data-toggle="modal" data-target="#myModal">'+
          '<img class="media-object" src="'+data["imgsrc"]+
          '" alt="">'+
            '</a>'+'</div>'+
            '<div class="media-body">'+
            '<div class="title">'+
              '<span class="classify">'+
                data["classify"]+
              '</span>'+
              '<span class="titlename media-heading">'+
                data['titlename']+
              '</span>'+
            '</div>'+
            '<span class="time">'+
              '<span class="glyphicon glyphicon-time"></span> '+
              '<span>'+data['pubdate']+'</span>'+
            '<p>'+data["intro"]+'</p>'+
            '<div 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>'+
            '</div>'+
          '</div>'+
            
          '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
            '<div class="modal-dialog" role="document">'+
              '<div class="modal-content">'+
                '<div class="modal-header">'+
                  '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                    '<span aria-hidden="true">&times;</span>'+
                  '</button>'+
                '</div>'+
                '<div class="modal-body"></div>'+
            '</div>'+
          '</div>'+
          '</div>'

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

주석 부분 은 보지 않 아 도 되 고 내용 에 영향 을 주지 않 습 니 다.
먼저 제 이 슨 파일 을 새로 만 들 려 면 제 이 슨 파일 이 주의해 야 할 문 제 는 제 이 슨 이 데이터 형식 에 대한 요구 가 있 고 url 의 각종 기 호 를 식별 하지 못 하기 때문에 오 류 를 제시 할 수 있 습 니 다.만약 에 복원 하지 않 으 면 JS 프로 세 스 를 차단 하여 데이터 가 페이지 에 표시 되 지 않 습 니 다.이 문 제 를 오래 찾 아 보 았 습 니 다.그리고 제 이 슨 문 제 는 js 에서 잘못 보고 되 지 않 습 니 다.해결 방법 은 encode 방법 을 이용 하여 url 을 포맷 한 다음 에 json 을 추가 하면 됩 니 다.html 에 서 는 decode 로 돌려 야 합 니 다.
두 번 째 구 덩이 는 html 를 특정한 태그 에 삽입 하 는 것 입 니 다.네 가지 방법 이 있 습 니 다.after 를 사용 하면 실현 할 수 있 습 니 다.반대로 사용 하지 마 세 요.
세 번 째 는 문자열 을 맞 출 때 플러스 번 호 를 잊 지 않도록 주의해 야 한다.하나 가 적 으 면 문제 가 생 길 수 있다.작은 문 제 는 오랫동안 찾 아 봐 야 발견 할 수 있 고 맞 춤 형 오 류 는 JS 가 잘못 보고 하지 않 아 발견 하기 어렵다.
JSON 데 이 터 를 가 져 와 불 러 오 는 방법 입 니 다.