js获取php json,通过JS获取JSON数据并加载的步骤详解

这次给大家带来通过JS获取JSON数据并加载的步骤详解，通过JS获取JSON数据并加载的注意事项有哪些，下面就是实战案例，一起来看一下。

通过JS获取JSON数据并加载的步骤详解

在写内容逻辑重复性的页面时，用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不会报错，很难发现。

以上就是获取JSON数据并加载的方法。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：