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 プロセスがブロックされ、データが失われます。長い間検索した後、この問題が見つかりました。js ではエラーが報告されません。解決策は、encode メソッドを使用して URL をフォーマットし、それを json に追加することです。また、decode を使用して URL を HTML に変換し直す必要もあります。

2 番目の落とし穴は、HTML を特定のタグに挿入することです。これを逆に使用しないでください。

3 番目の点は、文字列を結合するときにプラス記号を忘れないように注意する必要があります。さらに、JS では小さな問題を見つけるのに時間がかかります。スプライスエラー時にエラーが報告されないため、発見が困難になります。

効果は次のとおりです:

関連する推奨事項:

jQueryがjsonからデータを読み取ってhtmlに追加する方法

jsがJSONデータを読み取って解析する方法

JSでJson配列の配列長のインスタンスを取得する方法

以上がJSON からデータを読み取り、HTML に追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。