ajax自动加载列表页,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...

本文实例讲述了jQuery&＃43;ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考&＃xff0c;具体如下&＃xff1a;

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.mainDiv {

width: 800px;

border: solid 1px #f00;

padding: 10px;

}

.item {

width: 600px;

height: 50px;

border: solid 1px #00ff90;

font-size: 12px;

margin: 10px;

}

.title {

font-size: 16px;

line-height: 20px;

}

.content {

line-height: 14px;

}

.alink

{

display:none;

}

.loaddiv

{

display:none;

}

/*endlesspage.js*/

var gPageSize &＃61; 10;

var i &＃61; 1; //设置当前页数&＃xff0c;全局变量

$(function () {

//根据页数读取数据

function getData(pagenumber) {

i&＃43;&＃43;; //页码自动增加&＃xff0c;保证下次调用时为新的一页。

$.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {

if (data.length > 0) {

var jsonObj &＃61; JSON.parse(data);

insertDiv(jsonObj);

}

});

$.ajax({

type: "post",

url: "/ajax/Handler.ashx",

data: { pagesize: gPageSize, pagenumber: pagenumber },

dataType: "json",

success: function (data) {

$(".loaddiv").hide();

if (data.length > 0) {

var jsonObj &＃61; JSON.parse(data);

insertDiv(jsonObj);

}

},

beforeSend: function () {

$(".loaddiv").show();

},

error: function () {

$(".loaddiv").hide();

}

});

}

//初始化加载第一页数据

getData(1);

//生成数据html,append到div中

function insertDiv(json) {

var $mainDiv &＃61; $(".mainDiv");

var html &＃61; &＃39;&＃39;;

for (var i &＃61; 0; i

html &＃43;&＃61; &＃39;

}

$mainDiv.append(html);

}

//&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;核心代码&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

var winH &＃61; $(window).height(); //页面可视区域高度

var scrollHandler &＃61; function () {

var pageH &＃61; $(document.body).height();

var scrollT &＃61; $(window).scrollTop(); //滚动条top

var aa &＃61; (pageH - winH - scrollT) / winH;

if (aa <0.02) {//0.02是个参数

if (i % 10 &＃61;&＃61;&＃61; 0) {//每10页做一次停顿&＃xff01;

getData(i);

$(window).unbind(&＃39;scroll&＃39;);

$("#btn_Page").show();

} else {

getData(i);

$("#btn_Page").hide();

}

}

}

//定义鼠标滚动事件

$(window).scroll(scrollHandler);

//&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;核心代码&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

//继续加载按钮事件

$("#btn_Page").click(function () {

getData(i);

$(window).scroll(scrollHandler);

});

});

using System;

using System.Web;

using System.Data;

using MSCL;

using Newtonsoft.Json;

public class Handler : IHttpHandler {

public void ProcessRequest(HttpContext context)

{

//核心处理程序

string pageSize &＃61; context.Request["pagesize"];

string pageIndex &＃61; context.Request["pagenumber"];

if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex))

{

context.Response.Write("");

}

else

{

//请结合实际自行取分页数据&＃xff0c;可调用分页存储过程

MSCL.PageHelper p &＃61; new PageHelper();

p.CurrentPageIndex &＃61; Convert.ToInt32(pageIndex);

p.FieldsName &＃61; "*";

p.KeyField &＃61; "d_id";

p.SortName &＃61; "d_id asc";

p.TableName &＃61; "testtable";

p.EndCondition &＃61; "count(*)";

p.PageSize &＃61; Convert.ToInt32(pageSize);

DataTable dt &＃61; p.QueryPagination();

string json &＃61; JsonConvert.SerializeObject(dt, Formatting.Indented);

context.Response.Write(json);

}

}

public bool IsReusable {

get {

return false;

}

}

}

[

{

"rowId": 1,

"D_Id": 1,

"D_Name": "名称1",

"D_Password": "密码测试1",

"D_Else": "其他1"

},

{

"rowId": 2,

"D_Id": 2,

"D_Name": "名称2",

"D_Password": "密码测试2",

"D_Else": "其他2"

},

{

"rowId": 3,

"D_Id": 3,

"D_Name": "名称3",

"D_Password": "密码测试3",

"D_Else": "其他3"

},

{

"rowId": 4,

"D_Id": 4,

"D_Name": "名称4",

"D_Password": "密码测试4",

"D_Else": "其他4"

},

{

"rowId": 5,

"D_Id": 5,

"D_Name": "名称5",

"D_Password": "密码测试5",

"D_Else": "其他5"

},

{

"rowId": 6,

"D_Id": 6,

"D_Name": "名称6",

"D_Password": "密码测试6",

"D_Else": "其他6"

},

{

"rowId": 7,

"D_Id": 7,

"D_Name": "名称7",

"D_Password": "密码测试7",

"D_Else": "其他7"

},

{

"rowId": 8,

"D_Id": 8,

"D_Name": "名称8",

"D_Password": "密码测试8",

"D_Else": "其他8"

},

{

"rowId": 9,

"D_Id": 9,

"D_Name": "名称9",

"D_Password": "密码测试9",

"D_Else": "其他9"

},

{

"rowId": 10,

"D_Id": 10,

"D_Name": "名称10",

"D_Password": "密码测试10",

"D_Else": "其他10"

}

]

PS&＃xff1a;这里还涉及json格式数据的交互操作&＃xff0c;关于json数据操作小编推荐几个本站的在线工具供大家参考&＃xff0c;相信在以后的开发中可以派上用场&＃xff1a;

希望本文所述对大家jQuery程序设计有所帮助。