本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能。分享给大家供大家参考，具体如下：
index.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<?phprequire_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.sql
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
-- 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.13SET 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 接收请求页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?phprequire_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 数据库配置文件
|
1
2
3
4
5
6
7
8
9
10
11
|
<?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程序设计有所帮助。
