PHP+jQuery实现滚屏无刷新动态加载数据功能详解

更新时间：2017年05月04日 11:52:42 作者：yhdsir

这篇文章主要介绍了PHP+jQuery实现滚屏无刷新动态加载数据功能,涉及php动态读取数据库及加载数据实现滚屏无刷新效果的具体操作技巧,需要的朋友可以参考下

本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能。分享给大家供大家参考，具体如下：

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>
  <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

-- 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
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
$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程序设计有所帮助。

您可能感兴趣的文章:

Java和PHP在Web开发方面对比分析
本文主要从8个方面对php和java在做web开发方面的优劣性做了分析对比，非常不错的一篇文章，这里推荐给小伙伴们。
2015-03-03
PHP 生成器的使用详解
这篇文章主要介绍了PHP 生成器的使用详解，帮助大家更好的理解和学习使用PHP，感兴趣的朋友可以了解下
2021-04-04
PHP项目在Docker(WSL2)中运行缓慢的解决方法
最近在使用Docker容器运行PHP项目的时候,发现特别缓慢,例如一个干净的 ThinkPHP 5.1 框架,访问首页都需要1秒以上,如果再加上数据库查询、复杂的业务逻辑等代码的话,那速度可想而知,所以本文就给大家介绍了解决方法,需要的朋友可以参考下
2023-09-09
深入解析PHP的Yii框架中的event事件机制
这篇文章主要介绍了PHP的Yii框架中的event事件机制,文中讲解了Yii的事件处理器以及给组件对象绑定事件处理函数等重要知识,需要的朋友可以参考下
2016-03-03
PHP7基于curl实现的上传图片功能
这篇文章主要介绍了PHP7基于curl实现的上传图片功能,结合实例形式对比分析了php5.5之前与php7版本的curl图片上传功能相关实现与使用技巧,需要的朋友可以参考下
2018-05-05
使用PHP实现远程控制三路开关
怎样用PHP语言实现远程控制三路开关呢？本文描述了使用PHP语言调用HTTP接口,实现控制三路开关,三路开关可控制三路照明、排风扇等电器,文中有详细的代码示例,需要的朋友可以参考下
2024-04-04
php下尝试使用GraphicsMagick的缩略图功能
现在，对一个Web程序员来说，图像处理已经属于必会知识之一了。且不说Flickr，Yupoo等专业图片分享网站，就算是一个和图片分享不沾边的网站，也会用到很多图片处理的功能，比如说：用户上传头像，然后自动生成缩略图。
2011-01-01
PHP Swoole异步读取、写入文件操作示例
这篇文章主要介绍了PHP Swoole异步读取、写入文件操作,结合实例形式详细分析了php使用Swoole扩展异步操作文件读写的相关实现技巧,需要的朋友可以参考下
2019-10-10
php实现水印文字和缩略图的方法示例
这篇文章主要介绍了php实现水印文字和缩略图的方法,结合完整实例形式分析了php实现水印文字添加与缩略图生成的相关步骤及操作技巧,需要的朋友可以参考下
2016-12-12
PHP 编写大型网站问题集
是否容易维护、是否足够健壮、否效率足够高、是否足够安全，当PHP用于建立大型网站时这些就成为很关键的因素。
2010-05-05

PHP+jQuery实现滚屏无刷新动态加载数据功能详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具