PHP+jQuery實作滾屏無刷新動態載入資料功能的方法-php教程-PHP中文網

首頁

後端開發

php教程

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");
?>

登入後複製

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1244

Related knowledge

在PHP API中說明JSON Web令牌（JWT）及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一種基於JSON的開放標準，用於在各方之間安全地傳輸信息，主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時，可以生成和驗證JWT，並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大，調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、

解釋PHP中的晚期靜態綁定（靜態：:)。 Apr 03, 2025 am 12:04 AM

靜態綁定（static::）在PHP中實現晚期靜態綁定（LSB），允許在靜態上下文中引用調用類而非定義類。 1）解析過程在運行時進行，2）在繼承關係中向上查找調用類，3）可能帶來性能開銷。

php程序在字符串中計數元音 Feb 07, 2025 pm 12:12 PM

字符串是由字符組成的序列，包括字母、數字和符號。本教程將學習如何使用不同的方法在PHP中計算給定字符串中元音的數量。英語中的元音是a、e、i、o、u，它們可以是大寫或小寫。什麼是元音？元音是代表特定語音的字母字符。英語中共有五個元音，包括大寫和小寫： a, e, i, o, u 示例 1 輸入：字符串 = "Tutorialspoint" 輸出：6 解釋字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。總共有 6 個元

什麼是PHP魔術方法（__ -construct，__destruct，__call，__get，__ set等）並提供用例？ Apr 03, 2025 am 12:03 AM

PHP的魔法方法有哪些？ PHP的魔法方法包括：1.\_\_construct，用於初始化對象；2.\_\_destruct，用於清理資源；3.\_\_call，處理不存在的方法調用；4.\_\_get，實現動態屬性訪問；5.\_\_set，實現動態屬性設置。這些方法在特定情況下自動調用，提升代碼的靈活性和效率。

PHP和Python：比較兩種流行的編程語言 Apr 14, 2025 am 12:13 AM

PHP和Python各有優勢，選擇依據項目需求。 1.PHP適合web開發，尤其快速開發和維護網站。 2.Python適用於數據科學、機器學習和人工智能，語法簡潔，適合初學者。

PHP行動：現實世界中的示例和應用程序 Apr 14, 2025 am 12:19 AM

PHP在電子商務、內容管理系統和API開發中廣泛應用。 1)電子商務：用於購物車功能和支付處理。 2)內容管理系統：用於動態內容生成和用戶管理。 3)API開發：用於RESTfulAPI開發和API安全性。通過性能優化和最佳實踐，PHP應用的效率和可維護性得以提升。

PHP：網絡開發的關鍵語言 Apr 13, 2025 am 12:08 AM

PHP是一種廣泛應用於服務器端的腳本語言，特別適合web開發。 1.PHP可以嵌入HTML，處理HTTP請求和響應，支持多種數據庫。 2.PHP用於生成動態網頁內容，處理表單數據，訪問數據庫等，具有強大的社區支持和開源資源。 3.PHP是解釋型語言，執行過程包括詞法分析、語法分析、編譯和執行。 4.PHP可以與MySQL結合用於用戶註冊系統等高級應用。 5.調試PHP時，可使用error_reporting()和var_dump()等函數。 6.優化PHP代碼可通過緩存機制、優化數據庫查詢和使用內置函數。 7

PHP的持久相關性：它還活著嗎？ Apr 14, 2025 am 12:12 AM

PHP仍然具有活力，其在現代編程領域中依然佔據重要地位。 1)PHP的簡單易學和強大社區支持使其在Web開發中廣泛應用；2)其靈活性和穩定性使其在處理Web表單、數據庫操作和文件處理等方面表現出色；3)PHP不斷進化和優化，適用於初學者和經驗豐富的開發者。

See all articles

PHP+jQuery實作滾屏無刷新動態載入資料功能的方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題