首頁 > 教學 > PHP 教學

PHP+jQuery實現滾屏無重新整理動態載入資料功能的方法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
這篇文章主要介紹了PHP+jQuery實現滾屏無重新整理動態載入資料功能,涉及php動態讀取資料庫及載入資料實現滾屏無重新整理效果的具體操作技巧,需要的朋友可以參考下

具體如下：

index.php

<?phprequire_once('connect.php'); //串連資料庫$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>滾屏載入--無重新整理動態載入資料技術的應用</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('m-d H:i',$row['addtime']);?></p>         <p class="author"><?php echo $user[$row['userid']];?></p>       </p>       <p class="content"><?php echo $row['content'];?></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['date']+"</p>";            var str = str + "<p class=\"author\">"+array['author']+"</p>";            var str = str + "</p><p class=\"content\">"+array['content']+"</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.13SET 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 '0', `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, '愛愛愛', 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 接收請求頁面

<?phprequire_once('connect.php'); //串連資料庫$user = array('demo1','demo2','demo3','demo3','demo4');$page = intval($_GET['page']); //擷取請求的頁數$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); //轉換為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擴充隨機數

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More