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


Posted in PHP onMay 04, 2017

本文实例讲述了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 相关文章推荐
php生成zip压缩文件的方法详解
Jun 09 PHP
php弹出对话框实现重定向代码
Jan 23 PHP
PHP COOKIE及时生效的方法介绍
Feb 14 PHP
PHP实现克鲁斯卡尔算法实例解析
Aug 22 PHP
php简单实现查询数据库返回json数据
Apr 16 PHP
php实现微信公众号无限群发
Oct 11 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
Oct 08 PHP
PHP查询大量数据内存耗尽问题的解决方法
Oct 28 PHP
PHP常用的三种设计模式
Feb 17 PHP
thinkPHP5 tablib标签库自定义方法详解
May 10 PHP
PHP空值检测函数与方法汇总
Nov 19 PHP
PHP队列场景以及实现代码实例详解
Feb 26 PHP
PHP调用Mailgun发送邮件的方法
May 04 #PHP
PHP实现图片的等比缩放和Logo水印功能示例
May 04 #PHP
Yii2数据库操作常用方法小结
May 04 #PHP
Yii2中添加全局函数的方法分析
May 04 #PHP
Yii2表单事件之Ajax提交实现方法
May 04 #PHP
PHP经典实用正则表达式小结
May 04 #PHP
PHP实现的简单异常处理类示例
May 04 #PHP
You might like
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
JS 遮照层实现代码
2010/03/31 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
Linux操作面试题
2012/05/16 面试题
学院书画协会部门职责
2013/11/28 职场文书
文明礼仪主题班会
2015/08/13 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
VUE递归树形实现多级列表
2022/07/15 Vue.js