在寫內容邏輯重復性的頁面時，用json數據可以顯著提高編程效率，并且便于后期的數據維護。因此，在視頻專題頁面，需要展示多列視頻數據，我選擇了用json。

HTML如下(只展示重點部分，需要引用JQ)

熱門視頻

JS如下

$(document).ready(function(){

console.log(1111)

$.getJSON('data.json',function(data){

console.log(222)

var mediahtml="";

$.each(data,function(i,data) {

mediahtml+='

'+

'

'+

''+

'

'" alt="">'+

''+'

'+

'

'+

'

'+

''+

data["classify"]+

''+

''+

data['titlename']+

''+

'

'+

''+

' '+

''+data['pubdate']+''+

'

'+data["intro"]+'

'+

'

'+

'嘉'+

''+data["name"]+''+

''+data["position"]+''+

''+

''+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

''+

'×'+

''+

'

'+

'

'

'+

'

'+

'

'

// 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');

// }

// })

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

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

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

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

效果如下：

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

總結

以上是生活随笔為你收集整理的html 值追加,从JSON中读取数据追加到HTML中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。