本文執行個體講述了jQuery+ajax實現滾動到頁面底部自動載入圖文列表效果。分享給大家供大家參考，具體如下：
<!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; //設定當前頁數，全域變數$(function () { //根據頁數讀取資料 function getData(pagenumber) { i++; //頁碼自動增加，保證下次調用時為新的一頁。 $.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(); } }); } //初始化載入第一頁資料 getData(1); //產生資料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(); //頁面可視地區高度 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是個參數 if (i % 10 === 0) {//每10頁做一次停頓！ getData(i); $(window).unbind('scroll'); $("#btn_Page").show(); } else { getData(i); $("#btn_Page").hide(); } } } //定義滑鼠滾動事件 $(window).scroll(scrollHandler); //==============核心代碼============= //繼續載入按鈕事件 $("#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 { //請結合實際自行取分頁資料，可調用分頁預存程序 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格式資料的互動操作，關於json資料操作小編推薦幾個本站的線上工具供大家參考，相信在以後的開發中可以派上用場：
線上JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json
線上XML/JSON互相轉換工具：
http://tools.jb51.net/code/xmljson
json代碼線上格式化/美化/壓縮/編輯/轉換工具：
http://tools.jb51.net/code/jsoncodeformat
C語言風格/HTML/CSS/json代碼格式化美化工具：
http://tools.jb51.net/code/ccode_html_css_json
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴充技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選取器用法總結》及《jQuery常用外掛程式及用法總結》
希望本文所述對大家jQuery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
