滚动到页面底部ajax请求加载填充数据模拟
作者：秋了秋 发表时间：2016年01月27日
前后端交互往往离不开ajax的身影，这种无刷新加载数据现在运用得越来越广，也为增加用户体验新添了一笔，有了ajax，前端就跟数据打交道了。那么什么才是ajax，ajax的实现方法大家都很耳熟能详（理论），然而实际的数据分析操作却少之又少。
今天花了点时间写了个简洁易懂的ajax数据交互demo供初学者学习参考，代码如下，注释如下。。：
(function(){//用闭包自执行形成代码保护，据说这样易于团队维护代码。。
$(window).scroll(function(e){//监控滚动事件
var screenHeight=document.body.clientHeight||document.documentElement.clientHeight;//获取屏幕可视区域高度
var scrollHeight=$(document).scrollTop()+screenHeight;//计算触发ajax事件的页面滚动距离
var ajaxHeight=$('#ajax').offset().top;//到达这个高度的时候ajax开始
if(scrollHeight>=ajaxHeight+20){//判断滚动到目标高度的时候，则.....（ajax开始）
/*
$.ajax({
url: 'user.php',
type: 'GET',
dataType: 'html',
data: {user_id:"abc",pass:"yes"},
contentType: "application/html; charset=utf-8",
timeout: 10000,
success: function(data){
arr=data;
},
error: function(err){
alert("难道你不懂错误是什么吗？");
}
});*/
var arr='{"name":"秋叶","sex":"woman","age":20,"height":"162px"}';//后台请求的数据，暂用一个假数据模拟
var obj=$.parseJSON(arr);//把从后台接收过来的字符串转换为json格式
var li=document.createElement('li');//创建内容元素标签
$(li).append('<span style="color:red">正在加载中。。。。</span>');//先给它填充点默认文字（一般为loading效果）
$('#ajaxtxt').append(li);//把这个内容插入到页面中
$('#ajaxtxt').delay(1000).animate({'opacity':'0'},10,function(){//用delay模拟延迟加载，实际项目可忽略
$('#ajaxtxt').css({'opacity':'1'});
$(li).html('<div>他的名字叫<span style="color:red"> '+obj.name+' </span>她已经<span style="color:red"> '+obj.age+' </span>岁了，她不叫小薇！</div>');//把数据填充进来
})
}
})
在线运行查看demo：
0
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/428.html