搜尋
首頁後端開發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

theKeyStrategiestosigantificallyBoostPhpaPplicationPerformenCeare：1）UseOpCodeCachingLikeLikeLikeLikeLikeCacheToreDuceExecutiontime，2）優化AtabaseInteractionswithPreparedStateTementStatementStatementAndProperIndexing，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尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1672
14
CakePHP 教程
1428
52
Laravel 教程
1333
25
PHP教程
1277
29
C# 教程
1257
24
顯示更多