JSON에서 데이터를 읽고 HTML에 추가

반복적인 콘텐츠 로직이 포함된 페이지를 작성할 때 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('data.json',function(data){
                        
                        console.log(222)
                        
                        
                        
                    var mediahtml="";
                    
                    $.each(data,function(i,data) {
                        
                
                
                    mediahtml+='<p class="media">'+
                    '<p class="media-left">'+
                    '<a data-toggle="modal" data-target="#myModal">'+
                    '<img class="media-object" src="&#39;+data["imgsrc"]+
                    &#39;" alt="">'+
                        '</a>'+'</p>'+
                        '<p class="media-body">'+
                        '<p class="title">'+
                            '<span class="classify">'+
                                data["classify"]+
                            '</span>'+
                            '<span class="titlename media-heading">'+
                                data['titlename']+
                            '</span>'+
                        '</p>'+
                        '<span class="time">'+
                            '<span class="glyphicon glyphicon-time"></span> '+
                            '<span>'+data['pubdate']+'</span>'+
                        '<p>'+data["intro"]+'</p>'+
                        '<p 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>'+
                        '</p>'+
                    '</p>'+
                        
                    '<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
                        '<p class="modal-dialog" role="document">'+
                            '<p class="modal-content">'+
                                '<p class="modal-header">'+
                                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                                        '<span aria-hidden="true">&times;</span>'+
                                    '</button>'+
                                '</p>'+
                                '<p class="modal-body"></p>'+
                        '</p>'+
                    '</p>'+
                    '</p>'

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

댓글 부분은 무시하셔도 내용에는 영향을 미치지 않습니다.

먼저 새로운 json 파일을 만들어야 합니다. json 파일에서 주의해야 할 문제는 json이 데이터 형식에 대한 요구 사항을 가지고 있고 URL의 다양한 기호를 인식하지 못하기 때문에 오류가 발생한다는 것입니다. 복구하지 않으면 JS 프로세스가 차단되고 데이터가 손실됩니다. 오랫동안 검색한 결과 이 ​​문제가 발견되었으며 json 문제에서는 js에서 오류가 보고되지 않습니다. 해결 방법은 encode 메서드를 사용하여 URL 형식을 지정한 다음 json에 추가하는 것입니다. 또한 decode를 사용하여 html로 다시 변환해야 합니다.

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

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

효과는 다음과 같습니다.

관련 권장 사항:

jquery가 json에서 데이터를 읽고 이를 html에 추가하는 방법

js가 JSON 데이터를 읽고 구문 분석하는 방법

JS

를 사용하여 Json 배열에서 배열 길이의 인스턴스를 얻는 방법

위 내용은 JSON에서 데이터를 읽고 HTML에 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!