Maison > Article > développement back-end > Méthode PHP+jQuery pour implémenter la fonction de chargement dynamique des données sans rafraîchir l'écran de défilement
Méthode PHP+jQuery pour implémenter la fonction de chargement dynamique des données sans rafraîchir l'écran de défilement
- 墨辰丷original
- 2018-05-23 09:39:031559parcourir
Cet article présente principalement la fonction de chargement dynamique des données avec PHP+jQuery pour réaliser un défilement sans rafraîchissement. Cela implique les compétences opérationnelles spécifiques de PHP qui lisent dynamiquement la base de données et chargent les données pour réaliser le défilement sans effet de rafraîchissement. référez-vous-y
Les détails sont les suivants :
index.php
<?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>
<p 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)) {
?>
<p class="single_item">
<p class="element_head">
<p class="date"><?php echo date('m-d H:i',$row['addtime']);?></p>
<p class="author"><?php echo $user[$row['userid']];?></p>
</p>
<p class="content"><?php echo $row['content'];?></p>
</p>
<?php } ?>
</p>
<p class="nodata"></p>
</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 = "<p class=\"single_item\"><p class=\"element_head\">";
var str = str + "<p class=\"date\">"+array['date']+"</p>";
var str = str + "<p class=\"author\">"+array['author']+"</p>";
var str = str + "</p><p class=\"content\">"+array['content']+"</p></p>";
$("#container").append(str);
});
i++;
}else{
$(".nodata").show().html("别滚动了，已经到底了。。。");
return false;
}
});
}
});
});
</script>
</html>
ajax_demo.sql
-- 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 Recevoir la page de demande
<?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 Base de données fichier de configuration
<?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");
?>
Recommandations associées :
PHPFonction Array résumé des connaissances_compétences en php
PHPModificateur de constante const orienté objet
PHP Extension C Numéro aléatoire Numéro aléatoire
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn