Jquery通过ajax加载json,jquery ajax json 异步加载数据

初学者。。嘻嘻。写的或许有点冗杂。。有需要的可以测试下

看到他们网站里异步加载挺给力的。所以自己写了一个异步加载的界面。

可以下载我们团队做的app来看到具体的效果，我这里只给出一部分代码。

第一，异步加载，加载的数据是通过thinkphp的returnajax()方法返回的。

先在页面上存了一个记录页数的方法，因为后台要传进去第几页来取出数据库中你的值

所以在html加上这一句：

其实jquery写异步请求真心简单，我通过读取页面的滚动条来获取到是不是到达页尾和加载数据

var page_num_docuemt = $('.page_num');

$(window).scroll(function (event) {

//获取到离底部的距离

var height = $(document).height();

//获取滚动条高度

var scrollheight = $(document).scrollTop();

//获取到页面高度

var pageheight = $(window).height();

if(height<=pageheight+scrollheight){

//弹出正在加载

$('#loading').css({

"display":"inline"

});

ajax_get();

}

//console.log("页面高度:"+height+" 滚动条高度:"+scrollheight+" 页面高度:"+pageheight);

});

function ajax_get() {

var page_num = page_num_docuemt.val();

$.post("one_buy_ajax",{page:page_num},function (data) {

if(data.length!=0){

page_num_docuemt.val((parseInt(page_num)+1));

$('#loading').css({

"display":"none"

});

}else{

$('.loading').text("没有商品咯，亲！");

$('#loading').css({

"display":"inline"

});

}

//                    console.log(data);

//                    console.log("获取到的值："+page_num+" 下一个："+(parseInt(page_num)+1));

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

var html ="";

html+="

";

html+="

";

                        html+="

";

html+="

";

html+="

" + item.name + "

";

html+="

￥"+ item.price +"积分 ￥"+ item.y_price +"元

";

html+="

";

html+="

人气：200

";

html+="

已幸运：300

";

$('.goods_list').append(html);

});

});

}