從JSON中讀取數據追加到HTML中

在寫內容邏輯重複性的頁面時，用json數據能夠顯著提升編程效率，而且便於後期的數據維護。所以，在視頻專題頁面，須要展現多列視頻數據，我選擇了用json。

HTML以下（只展現重點部分，須要引用JQ）

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

註釋部分可不看，不影響內容。

首先要新建json文件，json文件需注意的問題是：json對數據格式有要求，不識別url中的各種符號，所以會提示錯誤，若是不修復，則會阻斷JS進程，形成數據在頁面不顯示，這個問題我找了很久才發現，並且json問題在js中不會報錯。解決辦法是利用encode方法，格式化url，而後再添加進json便可，在html中應該還要用decode轉回來。

第二個坑是插入html到某個標籤中,有四個方法，用after就能夠實現，不要用反了。

第三點是須要注意，不要在拼接字符串的時候忘掉加號，少一個就會出問題，一個小問題會找很久才發現，並且拼接錯誤JS不會報錯，很難發現。

效果以下：

以上就是幾個小問題明天繼續補充。