搜索
首页后端开发php教程PHP+jQuery实现滚屏无刷新动态加载数据功能的方法

PHP+jQuery实现滚屏无刷新动态加载数据功能的方法

墨辰丷
墨辰丷
May 23, 2018 am 09:39 AM
php动态

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

具体如下：

index.php

<?php
require_once(&#39;connect.php&#39;); //连接数据库
$user = array(&#39;demo1&#39;,&#39;demo2&#39;,&#39;demo3&#39;,&#39;demo3&#39;,&#39;<de></de>mo4&#39;); //模拟了几个用户
?>
<!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>
  <p 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)) {
    ?>
    <p class="single_item">
      <p class="element_head">
         <p class="date"><?php echo date(&#39;m-d H:i&#39;,$row[&#39;addtime&#39;]);?></p>
         <p class="author"><?php echo $user[$row[&#39;userid&#39;]];?></p>
       </p>
       <p class="content"><?php echo $row[&#39;content&#39;];?></p>
      </p>
    <?php } ?>
    </p>
  <p class="nodata"></p>
</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 = "<p class=\"single_item\"><p class=\"element_head\">";
            var str = str + "<p class=\"date\">"+array[&#39;date&#39;]+"</p>";
            var str = str + "<p class=\"author\">"+array[&#39;author&#39;]+"</p>";
            var str = str + "</p><p class=\"content\">"+array[&#39;content&#39;]+"</p></p>";
            $("#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 &#39;0&#39;,
 `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, &#39;爱爱爱&#39;, 1421332482),
(2, 1, &#39;爱爱爱&#39;, 1421332482),
(3, 0, &#39;爱爱爱&#39;, 1421332482),
(4, 1, &#39;爱爱爱&#39;, 1421332482),
(5, 0, &#39;爱爱爱&#39;, 1421332482),
(6, 0, &#39;爱爱爱&#39;, 1421332482),
(7, 0, &#39;爱爱爱&#39;, 1421332482),
(8, 2, &#39;爱爱爱&#39;, 1421332482),
(9, 0, &#39;爱爱爱&#39;, 1421332482),
(10, 0, &#39;爱爱爱&#39;, 1421332482),
(11, 0, &#39;爱爱爱&#39;, 1421332482),
(12, 0, &#39;爱爱爱&#39;, 1421332482),
(13, 0, &#39;爱爱爱&#39;, 1421332482),
(14, 0, &#39;爱爱爱&#39;, 1421332482),
(15, 0, &#39;爱爱爱&#39;, 1421332482),
(16, 0, &#39;爱爱爱&#39;, 1421332482),
(17, 0, &#39;爱爱爱&#39;, 1421332482),
(18, 0, &#39;爱爱爱&#39;, 1421332482),
(19, 0, &#39;爱爱爱&#39;, 1421332482),
(20, 0, &#39;爱爱爱&#39;, 1421332482),
(21, 0, &#39;爱爱爱&#39;, 1421332482),
(22, 0, &#39;爱爱爱&#39;, 1421332482),
(23, 0, &#39;爱爱爱&#39;, 1421332482),
(24, 0, &#39;爱爱爱&#39;, 1421332482),
(25, 0, &#39;爱爱爱&#39;, 1421332482),
(26, 0, &#39;2222&#39;, 1421333156),
(27, 0, &#39;2222&#39;, 1421333159),
(28, 0, &#39;2222&#39;, 1421333161),
(29, 0, &#39;2222&#39;, 1421333162),
(30, 0, &#39;2222&#39;, 1421333164),
(31, 0, &#39;2222&#39;, 1421333165),
(32, 0, &#39;2222&#39;, 1421333167),
(33, 0, &#39;2222&#39;, 1421333168),
(34, 0, &#39;2222&#39;, 1421333169),
(35, 0, &#39;2222&#39;, 1421333170),
(36, 0, &#39;2222&#39;, 1421333172),
(37, 0, &#39;2222&#39;, 1421333173),
(38, 0, &#39;2222&#39;, 1421333175),
(39, 0, &#39;2222&#39;, 1421333176),
(40, 0, &#39;2222&#39;, 1421333177),
(41, 0, &#39;2222&#39;, 1421333178),
(42, 0, &#39;2222&#39;, 1421333179),
(43, 0, &#39;2222&#39;, 1421333181),
(44, 0, &#39;2222&#39;, 1421333182),
(45, 0, &#39;2222&#39;, 1421333183),
(46, 0, &#39;2222&#39;, 1421333184),
(47, 0, &#39;2222&#39;, 1421333293),
(48, 0, &#39;2222&#39;, 1421333295),
(49, 0, &#39;2222&#39;, 1421333296),
(50, 0, &#39;2222&#39;, 1421333297),
(51, 0, &#39;2222&#39;, 1421333298),
(52, 0, &#39;2222&#39;, 1421333299),
(53, 0, &#39;2222&#39;, 1421333300),
(54, 0, &#39;2222&#39;, 1421333302),
(55, 0, &#39;2222&#39;, 1421333303),
(56, 0, &#39;2222&#39;, 1421333304),
(57, 0, &#39;2222&#39;, 1421333305),
(58, 0, &#39;2222&#39;, 1421333306),
(59, 0, &#39;2222&#39;, 1421333308),
(60, 0, &#39;2222&#39;, 1421333309),
(61, 0, &#39;2222&#39;, 1421333310),
(62, 0, &#39;2222&#39;, 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(&#39;connect.php&#39;); //连接数据库
$user = array(&#39;demo1&#39;,&#39;demo2&#39;,&#39;demo3&#39;,&#39;demo3&#39;,&#39;demo4&#39;);
$page = intval($_GET[&#39;page&#39;]); //获取请求的页数
$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(
    &#39;content&#39;=>$row[&#39;content&#39;],
    &#39;author&#39;=>$user[$row[&#39;userid&#39;]],
    &#39;date&#39;=>date(&#39;m-d H:i&#39;,$row[&#39;addtime&#39;])
  );
} */
if($query){
  while ($row=mysqli_fetch_array($query)) {
    $arr[] = array(
      &#39;content&#39;=>$row[&#39;content&#39;],
      &#39;author&#39;=>$user[$row[&#39;userid&#39;]],
      &#39;date&#39;=>date(&#39;m-d H:i&#39;,$row[&#39;addtime&#39;])
    );
  }
}
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面向对象之const常量修饰符

PHP 随机数 C扩展随机数

以上是PHP+jQuery实现滚屏无刷新动态加载数据功能的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
高流量网站的PHP性能调整高流量网站的PHP性能调整May 14, 2025 am 12:13 AM

TheSecretTokeEpingAphp-PowerEdwebSiterUnningSmoothlyShyunderHeavyLoadInVolvOLVOLVOLDEVERSALKEYSTRATICES：1）emplactopCodeCachingWithOpcachingWithOpCacheToreCescriptexecution Time，2）使用atabasequercachingCachingCachingWithRedataBasEndataBaseLeSendataBaseLoad，3）

PHP中的依赖注入：初学者的代码示例PHP中的依赖注入：初学者的代码示例May 14, 2025 am 12:08 AM

你应该关心DependencyInjection(DI)，因为它能让你的代码更清晰、更易维护。1)DI通过解耦类，使其更模块化，2)提高了测试的便捷性和代码的灵活性，3)使用DI容器可以管理复杂的依赖关系，但要注意性能影响和循环依赖问题，4)最佳实践是依赖于抽象接口，实现松散耦合。

PHP性能：是否可以优化应用程序？PHP性能：是否可以优化应用程序？May 14, 2025 am 12:04 AM

是的，优化papplicationispossibleandessential.1）empartcachingingcachingusedapcutorediucedsatabaseload.2）优化的atabaseswithexing，高效Quereteries，and ConconnectionPooling.3）EnhanceCodeWithBuilt-unctions，避免使用，避免使用ingglobalalairaiables，并避免使用

PHP性能优化：最终指南PHP性能优化：最终指南May 14, 2025 am 12:02 AM

theKeyStrategiestosiminificallyBoostphpapplicationPermenCeare：1）useOpCodeCachingLikeLikeLikeLikeLikeCacheToreDuceExecutiontime，2）优化AtabaseInteractionswithPreparedStateTemtStatementStatementSandProperIndexing，3）配置

PHP依赖注入容器：快速启动PHP依赖注入容器：快速启动May 13, 2025 am 12:11 AM

aphpdepentioncontiveContainerIsatoolThatManagesClassDeptions，增强codemodocultion，可验证性和Maintainability.itactsasaceCentralHubForeatingingIndections，因此reducingTightCightTightCoupOulplingIndeSingantInting。

PHP中的依赖注入与服务定位器PHP中的依赖注入与服务定位器May 13, 2025 am 12:10 AM

选择DependencyInjection(DI)用于大型应用，ServiceLocator适合小型项目或原型。1)DI通过构造函数注入依赖，提高代码的测试性和模块化。2)ServiceLocator通过中心注册获取服务，方便但可能导致代码耦合度增加。

PHP性能优化策略。PHP性能优化策略。May 13, 2025 am 12:06 AM

phpapplicationscanbeoptimizedForsPeedAndeffificeby：1）启用cacheInphp.ini，2）使用preparedStatatementSwithPdoforDatabasequesies，3）3）替换loopswitharray_filtaray_filteraray_maparray_mapfordataprocrocessing，4）conformentnginxasaseproxy，5）

PHP电子邮件验证：确保正确发送电子邮件PHP电子邮件验证：确保正确发送电子邮件May 13, 2025 am 12:06 AM

phpemailvalidation invoLvesthreesteps：1）格式化进行regulareXpressecthemailFormat; 2）dnsvalidationtoshethedomainhasavalidmxrecord; 3）

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
3 周前ByDDD
北端：融合系统，解释
4 周前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

显示更多

热门话题

Java教程
1672
14
CakePHP 教程
1428
52
Laravel 教程
1332
25
PHP教程
1277
29
C# 教程
1256
24
显示更多