溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

PHP+jQuery如何實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能

發(fā)布時間：2021-06-25 09:25:42 來源：億速云 閱讀：177 作者：小新 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)PHP+jQuery如何實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

具體如下：

index.php

<?php
require_once('connect.php'); //連接數(shù)據(jù)庫
$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>滾屏加載--無刷新動態(tài)加載數(shù)據(jù)技術(shù)的應(yīng)用</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" >提示：使用滾動或拉動滾動條向下看。</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(); //頁面可視區(qū)域高度
  var i = 1;//設(shè)置當(dāng)前頁數(shù)
  $(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("別滾動了，已經(jīng)到底了。。。");
          return false;
        }
      });
    }
  });
});
</script>
</html>

ajax_demo.sql

-- phpMyAdmin SQL Dump
-- version 3.5.2.2
-- http://www.phpmyadmin.net
--
-- 主機(jī): localhost
-- 生成日期: 2015 年 01 月 18 日 15:56
-- 服務(wù)器版本: 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 */;
--
-- 數(shù)據(jù)庫: `demo`
--
-- --------------------------------------------------------
--
-- 表的結(jié)構(gòu) `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 ;
--
-- 轉(zhuǎn)存表中的數(shù)據(jù) `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'); //連接數(shù)據(jù)庫
$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //獲取請求的頁數(shù)
$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); //轉(zhuǎn)換為json數(shù)據(jù)輸出
}
//echo json_encode($arr); //轉(zhuǎn)換為json數(shù)據(jù)輸出
?>

connect.php  數(shù)據(jù)庫配置文件

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

關(guān)于“PHP+jQuery如何實現(xiàn)滾屏無刷新動態(tài)加載數(shù)據(jù)功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手