《PHP編程:PHP+jQuery實現滾屏無刷新動態加載數據功能詳解》要點:
本文介紹了PHP編程:PHP+jQuery實現滾屏無刷新動態加載數據功能詳解,希望對您有用。如果有疑問,可以聯系我們。
本文實例講述了PHP+jQuery實現滾屏無刷新動態加載數據功能.分享給大家供大家參考,具體如下:PHP實戰
index.phpPHP實戰
<?php require_once('connect.php'); //連接數據庫 $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>滾屏加載--無刷新動態加載數據技術的應用</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(); //頁面可視區域高度 var i = 1;//設置當前頁數 $(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("別滾動了,已經到底了..."); return false; } }); } }); }); </script> </html>
ajax_demo.sqlPHP實戰
-- phpMyAdmin SQL Dump -- version 3.5.2.2 -- http://www.phpmyadmin.net -- -- 主機: localhost -- 生成日期: 2015 年 01 月 18 日 15:56 -- 服務器版本: 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 */; -- -- 數據庫: `demo` -- -- -------------------------------------------------------- -- -- 表的結構 `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 ; -- -- 轉存表中的數據 `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實戰
<?php require_once('connect.php'); //連接數據庫 $user = array('demo1','demo2','demo3','demo3','demo4'); $page = intval($_GET['page']); //獲取請求的頁數 $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); //轉換為json數據輸出 } //echo json_encode($arr); //轉換為json數據輸出 ?>
connect.php? 數據庫配置文件PHP實戰
<?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"); ?>
更多關于PHP相關內容感興趣的讀者可查看本站專題:《PHP+ajax技巧與應用小結》、《PHP網絡編程技巧總結》、《PHP基本語法入門教程》、《php面向對象程序設計入門教程》、《php字符串(string)用法總結》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》PHP實戰
希望本文所述對大家PHP程序設計有所幫助.PHP實戰
轉載請注明本頁網址:
http://www.snjht.com/jiaocheng/858.html