首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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+jQuery实现滚屏无刷新动态加载数据功能详解

- Author -

yhdsir

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
不用GD库生成当前时间的PNG格式图象的程序
Oct 09 PHP
php代码收集表单内容并写入文件的代码
Jan 29 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
Jan 11 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
Jun 13 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
Jun 18 PHP
php中用socket模拟http中post或者get提交数据的示例代码
Aug 08 PHP
php数组操作之键名比较与差集、交集赋值的方法
Nov 10 PHP
php打印输出棋盘的实现方法
Dec 23 PHP
thinkPHP5.0框架独立配置与动态配置方法
Mar 17 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
Dec 31 PHP
Centos7安装swoole扩展操作示例
Mar 26 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
Apr 20 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
openpyxl(1) logging(1) hmac(1) requests(1) 加密(1) hashlib(1) 相对路径(1) 解密(1) 相对路径 (1) 面向对象(3)
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
python append、extend与insert的区别
2016/10/13 Python
python实现决策树分类算法
2017/12/21 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python统计中文字符数量的两种方法
2019/01/31 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python实现3D地图可视化
2020/03/25 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python 读取位于包中的数据文件
2020/08/07 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
捷克街头、运动和滑板一站式商店：BoardStar.cz
2019/10/06 全球购物
干部行政关系介绍信
2014/01/17 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2015年推普周活动方案
2015/05/06 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server