改编自php版本,原文:
jQuery+PHP实现浏览更多内容http://www.helloweba.com/view-blog-130.html
这里记录.net 下的实现
一、首先创建数据库表test,并插入一些测试数据:
go
if exists (select * from sysobjects where name='test')
drop table [test]
go
CREATE TABLE [test](
[id] [int] IDENTITY(1,1),
[author] [varchar](50),
[content] [varchar](2000),
[createOn] [datetime]
)
declare @index int;
set @index = 1;
while(@index < 1000)
begin
insert into test([author],[content],[createOn])
values
('author' + cast(@index as varchar(4)),'content' + cast(@index as varchar(4)),DATEADD(DAY,@index,getdate()))
set @index = @index + 1
end
go
二、建立一个html文件
<!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.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.more.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#more').more({ 'address': 'ajax/data.ashx' }) //这里为向后台请求地址
});
</script>
<style type="text/css">
more
{
margin: 10px auto;
width: 560px;
border: 1px solid #999;
}
.single_item
{
padding: 20px;
border-bottom: 1px dotted #d3d3d3;
}
.author
{
position: absolute;
left: 0px;
font-weight: bold;
color: #39f;
}
.createOn
{
position: absolute;
right: 0px;
color: #999;
}
.content
{
line-height: 20px;
word-break: break-all;
}
.element_head
{
width: 100%;
position: relative;
height: 20px;
}
.get_more
{
margin: 10px;
text-align: center;
}
.more_loader_spinner
{
width: 20px;
height: 20px;
margin: 10px auto;
background: url(loader.gif) no-repeat;
}
</style>
</head>
<body>
<div id="more">
<div class="single_item">
<div class="element_head">
<div class="createOn">
</div>
<div class="author">
</div>
</div>
<div class="content">
</div>
</div>
<a href="javascript:;" class="get_more">::点击加载更多内容::</a>
</div>
</body>
</html>
三、建立一个一般处理程序data.ashx