jQuery读取JSON文件

来源:互联网 发布:linux搭建multicraft 编辑:程序博客网 时间:2024/05/17 20:14
jQuery ajax - getJSON()方法:

$.getJSON("test.json",function(data){
    alert(data[0].name);
});

该函数是简写的Ajax函数,等价于:
$.ajax({
    url: url,
    data: data,
    success: callback,
    dataType: json
});

附加参数:
$.getJSON("test.js",{name:"John",time:"2pm"},function(data){
    alert(data[0].name);
});

举例:
article.json文件:
[
{"title":"aaaaaaaaa","content":"bbbbbbbbbbbbbbbbbb","page":"1"},
{"title":"ccccccccc","content":"dddddddddddddddddd","page":"2"},
{"title":"eeeeeeeee","content":"ffffffffffffffffff","page":"3"}
]

js文件:
$(function(){
    //点击显示更多
    var i = 1;    //初始页数为1
    $('.more').click(function(){
        $('.p_2').show();
        setTimeout(function(){
            $.getJSON("article.json",function(data){
                //过滤
                data = $.grep(data,function(item){
                    return item.page == i;
                });
                if(data && data != ''){
                    //循环
                    $.each(data,function(index,array){
                        var content = "<ul><li class='li_1'><a href='#'><img src='' alt=''></a></li><li class='li_2'><h2>"+array['title']+"</h2><p>"+array['content']+"</p></li></ul>";
                        $('.content').append(content);
                    });
                    i++;
                }else{
                    $('.more a').html("没有更多了");
                }
                $('.p_2').hide();
            });
        },1000);
    });
});
0 0
原创粉丝点击