1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Jquery通过ajax加载json jquery ajax json 异步加载数据

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

时间:2021-11-17 15:01:29

相关推荐

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

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

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

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

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

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

所以在html加上这一句:

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

varpage_num_docuemt=$('.page_num');

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

//获取到离底部的距离

varheight=$(document).height();

//获取滚动条高度

varscrollheight=$(document).scrollTop();

//获取到页面高度

varpageheight=$(window).height();

if(height<=pageheight+scrollheight){

//弹出正在加载

$('#loading').css({

"display":"inline"

});

ajax_get();

}

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

});

functionajax_get(){

varpage_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){

varhtml="";

html+="

";

html+="

";

html+="

";

html+="

";

html+="

"+item.name+"

";

html+="

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

";

html+="

";

html+="

人气:200

";

html+="

已幸运:300

";

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

});

});

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。