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动态创建Flash动画
Oct 09 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
Oct 12 PHP
PHP开发不能违背的安全规则 过滤用户输入
May 01 PHP
ThinkPHP中的关联模型注意点
Jun 16 PHP
php学习笔记之基础知识
Nov 08 PHP
PHP+jQuery+Ajax实现用户登录与退出
Apr 27 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
May 13 PHP
php session的锁和并发
Jan 22 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
Jul 15 PHP
php 使用expat方式解析xml文件操作示例
Nov 26 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
Feb 21 PHP
php+ajax实现文件切割上传功能示例
Mar 03 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数组查找函数总结
2014/11/18 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
laravel 数据验证规则详解
2019/10/23 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中property函数用法实例分析
2018/06/04 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
python-地图可视化组件folium的操作
2020/12/14 Python
python 数据类型强制转换的总结
2021/01/25 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
公司年会抽奖活动主持词
2014/03/31 职场文书
高中语文课后反思
2014/04/27 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
煤矿安全协议书
2014/08/20 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
销售代理协议书
2014/09/30 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
工人先锋号申报材料
2014/12/29 职场文书