PHP+jQuery實(shí)現(xiàn)滾屏無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)功能詳解
更新時(shí)間：2017年05月04日 11:52:42 作者：yhdsir
這篇文章主要介紹了PHP+jQuery實(shí)現(xiàn)滾屏無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)功能,涉及php動(dòng)態(tài)讀取數(shù)據(jù)庫(kù)及加載數(shù)據(jù)實(shí)現(xiàn)滾屏無(wú)刷新效果的具體操作技巧,需要的朋友可以參考下
本文實(shí)例講述了PHP+jQuery實(shí)現(xiàn)滾屏無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)功能。分享給大家供大家參考，具體如下：
index.php
<?php
require_once('connect.php'); //連接數(shù)據(jù)庫(kù)
$user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模擬了幾個(gè)用戶
?>
<!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>滾屏加載--無(wú)刷新動(dòng)態(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">提示：使用滾動(dòng)或拉動(dòng)滾動(dòng)條向下看。</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(); //頁(yè)面可視區(qū)域高度
var i = 1;//設(shè)置當(dāng)前頁(yè)數(shù)
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滾動(dòng)條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("別滾動(dòng)了，已經(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ù)庫(kù): `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, '愛(ài)愛(ài)愛(ài)', 1421332482), (2, 1, '愛(ài)愛(ài)愛(ài)', 1421332482), (3, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (4, 1, '愛(ài)愛(ài)愛(ài)', 1421332482), (5, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (6, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (7, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (8, 2, '愛(ài)愛(ài)愛(ài)', 1421332482), (9, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (10, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (11, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (12, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (13, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (14, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (15, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (16, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (17, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (18, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (19, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (20, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (21, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (22, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (23, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (24, 0, '愛(ài)愛(ài)愛(ài)', 1421332482), (25, 0, '愛(ài)愛(ài)愛(ài)', 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 接收請(qǐng)求頁(yè)面
<?php
require_once('connect.php'); //連接數(shù)據(jù)庫(kù)
$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //獲取請(qǐng)求的頁(yè)數(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ù)庫(kù)配置文件
<?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基本語(yǔ)法入門教程》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫(kù)操作入門教程》及《php常見(jiàn)數(shù)據(jù)庫(kù)操作技巧匯總》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- PHP中使用jQuery+Ajax實(shí)現(xiàn)分頁(yè)查詢多功能操作(示例講解)
- 使用PHP+MySql+Ajax+jQuery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能示例
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- PHP批量刪除jQuery操作
- PHP jQuery+Ajax結(jié)合寫批量刪除功能
- jQuery+PHP+Mysql實(shí)現(xiàn)抽獎(jiǎng)程序
- php+mysql+jquery實(shí)現(xiàn)簡(jiǎn)易的檢索自動(dòng)補(bǔ)全提示功能
- PHP+JQUERY操作JSON實(shí)例
- php使用QueryList輕松采集js動(dòng)態(tài)渲染頁(yè)面方法
相關(guān)文章
Java和PHP在Web開(kāi)發(fā)方面對(duì)比分析
本文主要從8個(gè)方面對(duì)php和java在做web開(kāi)發(fā)方面的優(yōu)劣性做了分析對(duì)比，非常不錯(cuò)的一篇文章，這里推薦給小伙伴們。2015-03-03
這篇文章主要介紹了PHP 生成器的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用PHP，感興趣的朋友可以了解下2021-04-04
PHP項(xiàng)目在Docker(WSL2)中運(yùn)行緩慢的解決方法
最近在使用Docker容器運(yùn)行PHP項(xiàng)目的時(shí)候,發(fā)現(xiàn)特別緩慢,例如一個(gè)干凈的?ThinkPHP?5.1?框架,訪問(wèn)首頁(yè)都需要1秒以上,如果再加上數(shù)據(jù)庫(kù)查詢、復(fù)雜的業(yè)務(wù)邏輯等代碼的話,那速度可想而知,所以本文就給大家介紹了解決方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了PHP的Yii框架中的event事件機(jī)制,文中講解了Yii的事件處理器以及給組件對(duì)象綁定事件處理函數(shù)等重要知識(shí),需要的朋友可以參考下2016-03-03
PHP7基于curl實(shí)現(xiàn)的上傳圖片功能
這篇文章主要介紹了PHP7基于curl實(shí)現(xiàn)的上傳圖片功能,結(jié)合實(shí)例形式對(duì)比分析了php5.5之前與php7版本的curl圖片上傳功能相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2018-05-05
使用PHP實(shí)現(xiàn)遠(yuǎn)程控制三路開(kāi)關(guān)
怎樣用PHP語(yǔ)言實(shí)現(xiàn)遠(yuǎn)程控制三路開(kāi)關(guān)呢？本文描述了使用PHP語(yǔ)言調(diào)用HTTP接口,實(shí)現(xiàn)控制三路開(kāi)關(guān),三路開(kāi)關(guān)可控制三路照明、排風(fēng)扇等電器,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
現(xiàn)在，對(duì)一個(gè)Web程序員來(lái)說(shuō)，圖像處理已經(jīng)屬于必會(huì)知識(shí)之一了。且不說(shuō)Flickr，Yupoo等專業(yè)圖片分享網(wǎng)站，就算是一個(gè)和圖片分享不沾邊的網(wǎng)站，也會(huì)用到很多圖片處理的功能，比如說(shuō)：用戶上傳頭像，然后自動(dòng)生成縮略圖。2011-01-01
這篇文章主要介紹了PHP Swoole異步讀取、寫入文件操作,結(jié)合實(shí)例形式詳細(xì)分析了php使用Swoole擴(kuò)展異步操作文件讀寫的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了php實(shí)現(xiàn)水印文字和縮略圖的方法,結(jié)合完整實(shí)例形式分析了php實(shí)現(xiàn)水印文字添加與縮略圖生成的相關(guān)步驟及操作技巧,需要的朋友可以參考下2016-12-12
是否容易維護(hù)、是否足夠健壯、否效率足夠高、是否足夠安全，當(dāng)PHP用于建立大型網(wǎng)站時(shí)這些就成為很關(guān)鍵的因素。2010-05-05