本文實例講述了PHP+jQuery實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能。分享給大家供大家參考，具體如下：
index.php
<?php
require_once('connect.php'); //連接數(shù)據(jù)庫
$user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模擬了幾個用戶
?>
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>滾屏加載--無刷新動態(tài)加載數(shù)據(jù)技術(shù)的應(yīng)用</title>
<style type="text/css">
#container{margin:10px auto;width: 660px; border: 1px solid #999;}
.single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}
.author{position: absolute; left: 0px; font-weight:bold; color:#39f}
.date{position: absolute; right: 0px; color:#999}
.content{line-height:20px; word-break: break-all;}
.element_head{width: 100%; position: relative; height: 20px;}
.nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> //需要引入jquery
</head>
<body>
<p class="one" style="margin:20px">提示：使用滾動或拉動滾動條向下看。</p>
<div id="container">
<?php
$query=mysqli_query($link, "select * from say order by id desc limit 0,15");
while ($row=mysqli_fetch_array($query, MYSQLI_ASSOC)) {
?>
<div class="single_item">
<div class="element_head">
<div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>
<div class="author"><?php echo $user[$row['userid']];?></div>
</div>
<div class="content"><?php echo $row['content'];?></div>
</div>
<?php } ?>
</div>
<div class="nodata"></div>
</body>
<script type="text/javascript">
$(function(){
var winH = $(window).height(); //頁面可視區(qū)域高度
var i = 1;//設(shè)置當(dāng)前頁數(shù)
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滾動條top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str = "<div class=\"single_item\"><div class=\"element_head\">";
var str = str + "<div class=\"date\">"+array['date']+"</div>";
var str = str + "<div class=\"author\">"+array['author']+"</div>";
var str = str + "</div><div class=\"content\">"+array['content']+"</div></div>";
$("#container").append(str);
});
i++;
}else{
$(".nodata").show().html("別滾動了，已經(jīng)到底了。。。");
return false;
}
});
}
});
});
</script>
</html>
ajax_demo.sql
-- phpMyAdmin SQL Dump -- version 3.5.2.2 -- http://www.phpmyadmin.net -- -- 主機(jī): localhost -- 生成日期: 2015 年 01 月 18 日 15:56 -- 服務(wù)器版本: 5.1.46-community -- PHP 版本: 5.2.13 SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- 數(shù)據(jù)庫: `demo` -- -- -------------------------------------------------------- -- -- 表的結(jié)構(gòu) `say` -- CREATE TABLE IF NOT EXISTS `say` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userid` int(11) NOT NULL DEFAULT '0', `content` varchar(200) NOT NULL, `addtime` int(10) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=63 ; -- -- 轉(zhuǎn)存表中的數(shù)據(jù) `say` -- INSERT INTO `say` (`id`, `userid`, `content`, `addtime`) VALUES (1, 0, '愛愛愛', 1421332482), (2, 1, '愛愛愛', 1421332482), (3, 0, '愛愛愛', 1421332482), (4, 1, '愛愛愛', 1421332482), (5, 0, '愛愛愛', 1421332482), (6, 0, '愛愛愛', 1421332482), (7, 0, '愛愛愛', 1421332482), (8, 2, '愛愛愛', 1421332482), (9, 0, '愛愛愛', 1421332482), (10, 0, '愛愛愛', 1421332482), (11, 0, '愛愛愛', 1421332482), (12, 0, '愛愛愛', 1421332482), (13, 0, '愛愛愛', 1421332482), (14, 0, '愛愛愛', 1421332482), (15, 0, '愛愛愛', 1421332482), (16, 0, '愛愛愛', 1421332482), (17, 0, '愛愛愛', 1421332482), (18, 0, '愛愛愛', 1421332482), (19, 0, '愛愛愛', 1421332482), (20, 0, '愛愛愛', 1421332482), (21, 0, '愛愛愛', 1421332482), (22, 0, '愛愛愛', 1421332482), (23, 0, '愛愛愛', 1421332482), (24, 0, '愛愛愛', 1421332482), (25, 0, '愛愛愛', 1421332482), (26, 0, '2222', 1421333156), (27, 0, '2222', 1421333159), (28, 0, '2222', 1421333161), (29, 0, '2222', 1421333162), (30, 0, '2222', 1421333164), (31, 0, '2222', 1421333165), (32, 0, '2222', 1421333167), (33, 0, '2222', 1421333168), (34, 0, '2222', 1421333169), (35, 0, '2222', 1421333170), (36, 0, '2222', 1421333172), (37, 0, '2222', 1421333173), (38, 0, '2222', 1421333175), (39, 0, '2222', 1421333176), (40, 0, '2222', 1421333177), (41, 0, '2222', 1421333178), (42, 0, '2222', 1421333179), (43, 0, '2222', 1421333181), (44, 0, '2222', 1421333182), (45, 0, '2222', 1421333183), (46, 0, '2222', 1421333184), (47, 0, '2222', 1421333293), (48, 0, '2222', 1421333295), (49, 0, '2222', 1421333296), (50, 0, '2222', 1421333297), (51, 0, '2222', 1421333298), (52, 0, '2222', 1421333299), (53, 0, '2222', 1421333300), (54, 0, '2222', 1421333302), (55, 0, '2222', 1421333303), (56, 0, '2222', 1421333304), (57, 0, '2222', 1421333305), (58, 0, '2222', 1421333306), (59, 0, '2222', 1421333308), (60, 0, '2222', 1421333309), (61, 0, '2222', 1421333310), (62, 0, '2222', 1421333311); /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。