本文實例講述了jQuery+ajax實現(xiàn)滾動到頁面底部自動加載圖文列表效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>滾動到頁面頂部加載</title> <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="js/endlesspage.js" type="text/javascript"></script> <style type="text/css"> .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; } </style></head><body> <h1>滾動測試</h1> <div class="mainDiv"> <!--<div class="item"> <div class="title">title</div> <div class="content">content content content content content content content</div> </div> --> </div> <div class="loaddiv"> <img src="images/loading.gif" /> </div> <div> <a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a> </div></body></html>/*endlesspage.js*/var gPageSize = 10;var i = 1; //設置當前頁數(shù)，全局變量$(function () { //根據(jù)頁數(shù)讀取數(shù)據(jù) function getData(pagenumber) { i++; //頁碼自動增加，保證下次調(diào)用時為新的一頁。 $.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) { if (data.length > 0) { var jsonObj = 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 = JSON.parse(data); insertDiv(jsonObj); } }, beforeSend: function () { $(".loaddiv").show(); }, error: function () { $(".loaddiv").hide(); } }); } //初始化加載第一頁數(shù)據(jù) getData(1); //生成數(shù)據(jù)html,append到div中 function insertDiv(json) { var $mainDiv = $(".mainDiv"); var html = ''; for (var i = 0; i < json.length; i++) { html += '<div class="item">'; html += ' <div class="title">' + json[i].rowId + ' ' + json[i].D_Name + '</div>'; html += ' <div class="content">' + json[i].D_Name + ' ' + json[i].D_Password + '</div>'; html += '</div>'; } $mainDiv.append(html); } //==============核心代碼============= var winH = $(window).height(); //頁面可視區(qū)域高度 var scrollHandler = function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滾動條top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.02) {//0.02是個參數(shù) if (i % 10 === 0) {//每10頁做一次停頓！ getData(i); $(window).unbind('scroll'); $("#btn_Page").show(); } else { getData(i); $("#btn_Page").hide(); } } } //定義鼠標滾動事件 $(window).scroll(scrollHandler); //==============核心代碼============= //繼續(xù)加載按鈕事件 $("#btn_Page").click(function () { getData(i); $(window).scroll(scrollHandler); });});<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.Data;using MSCL;using Newtonsoft.Json;public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { //核心處理程序 string pageSize = context.Request["pagesize"]; string pageIndex = context.Request["pagenumber"]; if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex)) { context.Response.Write(""); } else { //請結合實際自行取分頁數(shù)據(jù)，可調(diào)用分頁存儲過程 MSCL.PageHelper p = new PageHelper(); p.CurrentPageIndex = Convert.ToInt32(pageIndex); p.FieldsName = "*"; p.KeyField = "d_id"; p.SortName = "d_id asc"; p.TableName = "testtable"; p.EndCondition = "count(*)"; p.PageSize = Convert.ToInt32(pageSize); DataTable dt = p.QueryPagination(); string json = 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：這里還涉及json格式數(shù)據(jù)的交互操作，關于json數(shù)據(jù)操作小編推薦幾個本站的在線工具供大家參考，相信在以后的開發(fā)中可以派上用場：
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.VeVB.COm/code/json
在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/jsoncodeformat
C語言風格/HTML/CSS/json代碼格式化美化工具：
http://tools.VeVB.COm/code/ccode_html_css_json
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
