频道导航

Ajax动态滚动加载数据（第一版）

2020-06-06 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了Ajax动态滚动加载数据（第一版），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

看新浪微博，人人网都有这样的效果：滚动条滚动到最下面的时候，新的数据就被自动加载出来了，今天亲自尝试了一下这个效果的实现。

核心代码更新：

[javascript]view plaincopy 
   
 $(window).scroll(function(){
 //当滚动到最底部以上n像素时，加载新内容
 if($(document).height()-$(this).scrollTop()-$(this).height()<1){
 getData(gCurrentPage,gLongitude,gLatitude);
 }
 });

首先，准备一个分页的存储过程：

[sql]copy 
   

PROCEDURE

proctest

@pagesizeINT,
@pagenumberINT
AS
SELECT*
FROM(SELECTROW_NUMBER()OVER(ORDERBYuserid)ASROWNUM,c_name,user_emailFROMehrusersWHEREc_name<>''
)ASproducts
WHEREROWNUMBETWEEN@pagesize*(@pagenumber-1)+1and@pagesize*@pagenumber
EXECdbo.proctest20,1

接着，写一个取数据的C#方法：

[csharp]copy 
   

//Test

publicstaticDataTableGetTable(intpagesize,intpagenum)
{
stringsql=string.Format(@"EXECdbo.proctest{0},{1}",pagesize,pagenum);
DataSetds=sqlHelper.ExecuteDataset(ConnString.GetConString,CommandType.Text,sql);
if(ds.Tables.Count>0&&ds.Tables[0].Rows.Count>0)
returnds.Tables[0];
else
returnnull;
}

Ajax请求数据的逻辑，调用刚才的方法，返回JSON：

copy

void

Page_Load(

object

sender,EventArgse)

{
if(Request.QueryString["pagesize"]!=null&&Request.QueryString["pagenumber"]!=null)
intpagesize=int.Parse(Request.QueryString["pagesize"].ToString());
intpagenumber=int.Parse(Request.QueryString["pagenumber"].ToString());
System.Data.DataTabledt=DB.GetTable(pagesize,pagenumber);
stringjson=Tools.CreateJsonParameters(dt);
Response.Write(json);
}
其中用到了一个aspx页面作为controller。
接下来，就是比较重要的页面和js代码了：

页面：

[html] copy

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">
headMetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
title>滚动测试</style .mainDiv{
width:800px;
border:solid1px#f00;
padding:10px;
.item{
width:600px;
height:50px;
border:solid1px#00ff90;
font-size:12px;
margin:10px;
.title{
font-size:16px;
line-height:20px;
.content{
line-height:14px;
scriptsrc="Scripts/jquery-1.7.1.js">scriptbodyh1divclass="mainDiv" <!--divclass="item"divclass="title">titledivdivclass="content">contentcontentcontentcontentcontentcontentcontent --html>

JS：

copy

<scripttype="text/javascript">

vargPageSize=10;
vari=1;//设置当前页数，全局变量
$(function(){
//根据页数读取数据
functiongetData(pagenumber){
i++;//页码自动增加，保证下次调用时为新的一页。
$.get("Ajax.aspx",{pagesize:gPageSize,pagenumber:pagenumber},153); font-weight:bold; background-color:inherit">function(data){
if(data.length>0){
varjsonObj=JSON.parse(data);
insertDiv(jsonObj.Head);
});
//初始化加载第一页数据
getData(1);
//生成数据html，append到div中
functioninsertDiv(json){
var$mainDiv=$(".mainDiv");
varhtml='';
for(vari=0;i<json.length;i++){
html+='<divclass="item">';
html+='<divclass="title">'+json[i].ROWNUM+''+json[i].c_name+'</div>';
html+='<divclass="content">'+json[i].user_email+'</div>';
html+='</div>';
$mainDiv.append(html);
//==============核心代码=============
varwinH=$(window).height();//页面可视区域高度
//定义鼠标滚动事件
$(window).scroll(varpageH=$(document.body).height();
varscrollT=$(window).scrollTop();//滚动条top
varaa=(pageH-winH-scrollT)/winH;
if(aa<0.02){//0.02是个参数
getData(i);
//==============核心代码=============
</script>

最终效果：

滚动前：

滚动自动刷新：

后来又对这一版本进行了一些改进，详见：

http://www.cnblogs.com/dannywang/p/3337473.html

原文链接：https://www.f2er.com/ajax/163470.html

上一篇：没事灌灌水下一篇：Ajax动态滚动加载数据(第二版)

猜你在找的Ajax相关文章

网页的异步请求（Ajax）

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求兼容性问题利用iframe模拟ajax 实现表...

作者：前端之家时间：2021-01-14

手动实现AJAX

AJAX 每日更新前端基础，如果觉得不错，点个star吧 😃 https://github.com/Win...

作者：前端之家时间：2020-12-19

axios异步提交表单数据的不同形式

踩坑Axios提交form表单几种格式前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

作者：前端之家时间：2020-12-12

php的ajax简单实例

很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

作者：前端之家时间：2020-11-11

Json与Ajax(注册实例）

需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: "./serv...

作者：前端之家时间：2020-11-07

jSon和Ajax登录功能，ajax数据交互案例

ajax实例，检测用户与注册检测用户名是否被占用：在用户填写完用户名之后，ajax会异步向...

作者：前端之家时间：2020-11-07

关于AjaxControlToolkit的样式问题

网(LieHuo.Net)教程技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

作者：前端之家时间：2020-11-04

一个简单的AJAX实现(HELLO AJAX)

客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

作者：前端之家时间：2020-11-04

AJAX中文乱码的两类问题及解决之策

1）发送路径中的参数有中文，在服务器段接收参数值是乱码例如： var url=”a.jsp?na...

作者：前端之家时间：2020-11-04

实例：AJAX返回xml代码如何在网页中显示

建站学院（LieHuo.Net）文档今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

作者：前端之家时间：2020-11-04

最新文章