快捷導(dǎo)航

PHP+jQuery實(shí)現(xiàn)滾屏無刷新動(dòng)態(tài)加載數(shù)據(jù)功能詳解

更新時(shí)間：2017年05月04日 11:52:42 作者：yhdsir

這篇文章主要介紹了PHP+jQuery實(shí)現(xiàn)滾屏無刷新動(dòng)態(tài)加載數(shù)據(jù)功能,涉及php動(dòng)態(tài)讀取數(shù)據(jù)庫及加載數(shù)據(jù)實(shí)現(xiàn)滾屏無刷新效果的具體操作技巧,需要的朋友可以參考下

本文實(shí)例講述了PHP+jQuery實(shí)現(xiàn)滾屏無刷新動(dòng)態(tài)加載數(shù)據(jù)功能。分享給大家供大家參考，具體如下：

index.php

<?php
require_once('connect.php'); //連接數(shù)據(jù)庫
$user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模擬了幾個(gè)用戶
?>
<!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>滾屏加載--無刷新動(dòng)態(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" style="margin:20px">提示：使用滾動(dòng)或拉動(dòng)滾動(dòng)條向下看。</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(); //滾動(dòng)條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("別滾動(dòng)了，已經(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相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《PHP基本語法入門教程》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》

希望本文所述對大家PHP程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: