PHP+jQuery實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能詳解
更新時間：2017年05月04日 11:52:42 作者：yhdsir
這篇文章主要介紹了PHP+jQuery實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能,涉及php動態(tài)讀取數(shù)據(jù)庫及加載數(shù)據(jù)實現(xiàn)滾屏無刷新效果的具體操作技巧,需要的朋友可以參考下
本文實例講述了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 */;
result.php 接收請求頁面
<?php
require_once('connect.php'); //連接數(shù)據(jù)庫
$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //獲取請求的頁數(shù)
$start = $page*15;
$query=mysqli_query($link, "select * from say order by id desc limit $start,15");
/* while ($row=mysqli_fetch_array($query)) {
$arr[] = array(
'content'=>$row['content'],
'author'=>$user[$row['userid']],
'date'=>date('m-d H:i',$row['addtime'])
);
} */
if($query){
while ($row=mysqli_fetch_array($query)) {
$arr[] = array(
'content'=>$row['content'],
'author'=>$user[$row['userid']],
'date'=>date('m-d H:i',$row['addtime'])
);
}
}
if(!empty($arr)){
echo json_encode($arr); //轉(zhuǎn)換為json數(shù)據(jù)輸出
}
//echo json_encode($arr); //轉(zhuǎn)換為json數(shù)據(jù)輸出
?>
connect.php 數(shù)據(jù)庫配置文件
<?php
$host="localhost";
$db_user="root";
$db_pass="admin";
$db_name="ajax_demo";
$timezone="Asia/Shanghai";
$link=mysqli_connect($host,$db_user,$db_pass);
mysqli_select_db($link, $db_name);
mysqli_query($link, "SET names UTF8");
header("Content-Type: text/html; charset=utf-8");
?>
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《PHP基本語法入門教程》、《php面向?qū)ο蟪绦蛟O(shè)計入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家PHP程序設(shè)計有所幫助。
相關(guān)文章
本文主要從8個方面對php和java在做web開發(fā)方面的優(yōu)劣性做了分析對比，非常不錯的一篇文章，這里推薦給小伙伴們。2015-03-03
這篇文章主要介紹了PHP 生成器的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用PHP，感興趣的朋友可以了解下2021-04-04
最近在使用Docker容器運行PHP項目的時候,發(fā)現(xiàn)特別緩慢,例如一個干凈的?ThinkPHP?5.1?框架,訪問首頁都需要1秒以上,如果再加上數(shù)據(jù)庫查詢、復(fù)雜的業(yè)務(wù)邏輯等代碼的話,那速度可想而知,所以本文就給大家介紹了解決方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了PHP的Yii框架中的event事件機(jī)制,文中講解了Yii的事件處理器以及給組件對象綁定事件處理函數(shù)等重要知識,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了PHP7基于curl實現(xiàn)的上傳圖片功能,結(jié)合實例形式對比分析了php5.5之前與php7版本的curl圖片上傳功能相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2018-05-05
使用PHP實現(xiàn)遠(yuǎn)程控制三路開關(guān)
怎樣用PHP語言實現(xiàn)遠(yuǎn)程控制三路開關(guān)呢？本文描述了使用PHP語言調(diào)用HTTP接口,實現(xiàn)控制三路開關(guān),三路開關(guān)可控制三路照明、排風(fēng)扇等電器,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
現(xiàn)在，對一個Web程序員來說，圖像處理已經(jīng)屬于必會知識之一了。且不說Flickr，Yupoo等專業(yè)圖片分享網(wǎng)站，就算是一個和圖片分享不沾邊的網(wǎng)站，也會用到很多圖片處理的功能，比如說：用戶上傳頭像，然后自動生成縮略圖。2011-01-01
這篇文章主要介紹了PHP Swoole異步讀取、寫入文件操作,結(jié)合實例形式詳細(xì)分析了php使用Swoole擴(kuò)展異步操作文件讀寫的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了php實現(xiàn)水印文字和縮略圖的方法,結(jié)合完整實例形式分析了php實現(xiàn)水印文字添加與縮略圖生成的相關(guān)步驟及操作技巧,需要的朋友可以參考下2016-12-12
是否容易維護(hù)、是否足夠健壯、否效率足夠高、是否足夠安全，當(dāng)PHP用于建立大型網(wǎng)站時這些就成為很關(guān)鍵的因素。2010-05-05