当前位置:秋叶网络博客 前端编程 ◊ 滚动到页面底部ajax请求加载填充数据模拟

滚动到页面底部ajax请求加载填充数据模拟

作者:秋叶 发表时间:2016年1月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:

代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

目录: 前端编程 | 标签: | 5715次阅读