Javascript函數中的arguments.callee用法實例分析
733
2024-02-18
本文實例講述了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="http://www.gimoo.net/t/1902/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/1902/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="http://www.gimoo.net/t/1902/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.gimoo.net/code/json
在線XML/JSON互相轉換工具：
http://tools.gimoo.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.gimoo.net/code/jsoncodeformat
C語言風格/HTML/CSS/json代碼格式化美化工具：
http://tools.gimoo.net/code/ccode_html_css_json
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
