새로 고침이 아닌 페이징 예제의 PHP Ajax 구현에 대한 자세한 설명(데모 소스 코드 다운로드 포함)

새로 고침이 아닌 페이징 예제의 PHP Ajax 구현에 대한 자세한 설명(데모 소스 코드 다운로드 포함)_php 기술

WBOY

풀어 주다： 2016-05-16 19:54:38

원래의

1471명이 탐색했습니다.

이 기사의 예에서는 PHP Ajax를 사용하여 새로 고침 없는 페이징을 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

참고: 여기에 사용된 일부 클래스 라이브러리의 소스 코드는 이전 기사에서 찾을 수 있으므로 기사의 길이를 줄이기 위해 링크를 표시합니다.

이 기사에서는 새로 고침 없는 페이징의 Ajax 구현, 구현 원칙, 코드 표시 및 코드 다운로드에 대해 설명합니다.

여기서 몇 가지 지식을 설명해야 합니다.

1. 페이지를 새로 고치지 않는 Ajax의 이점: 좋은 고객 경험을 제공하고, 데이터베이스에서 데이터를 가져와 Ajax를 통해 백그라운드에 표시하며, 페이지 로드를 기다리는 동안 나타나는 공백 상태를 제거합니다.

2. 그러면 Ajax 비새로고침 페이지가 동적 페이지(.php)에서 실행된다는 건가요? 아니면 정적 페이지(.html/.htm/.shtml)입니까? 대답은 다음과 같습니다.

3. 구현 원리: 동적 페이지에서 반환되는 데이터는 프런트엔드 JS 스크립트 프로그램과 Ajax의 조합을 통해 얻어지고 표시됩니다.

자, 아래 코드를 설명해 보겠습니다.

정적 페이지에서 실행되기 때문에 먼저 index.html의 코드 목록은 다음과 같습니다.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script> <!-- 载入 Ajax 类库 -->
<title>Ajax 实现无刷新页面</title>
<style type="text/css">
  body {
    font-size:12px;
  }
</style>
</head>
<body>
  <div id="fpage">数据加载中...</div>
</body>
</html>

로그인 후 복사

코드 목록에는 Ajax 클래스 라이브러리가 로드되어 있습니다. 이 클래스 라이브러리는 이전 기사 "간단한 Ajax 클래스 라이브러리 분석 및 사용 예"

에서 확인할 수 있습니다.

이 정적 페이지에는 "데이터 로드 중...."만 표시되고 데이터는 없습니다. 이때 Ajax를 통해 데이터베이스로부터 데이터를 얻기 위해서는 JS 스크립트가 필요합니다. JS 스크립트는 다음과 같습니다.

<script type="text/javascript">
  /**
  * setPage(url) 根据 url 从 article.php 中获取数据
  * @param int pageNum 页码
  * @return string
  */
  var cache=new Array(); // 缓存变量，当数据被访问过之后放置在缓存中，加快访问速度
  function setPage(pageNum) {
    var fpage = document.getElementById('fpage'); // 获取 fpage 对象
    // 如果缓存中存在数据，那么直接从缓存中读取；如果不存在数据，那么就从数据库中读取，并把数据存入缓存
    if (typeof(cache[pageNum])=='undefined') {
      var ajax = Ajax();
      ajax.get('article.php&#63;page='+pageNum, function(data){
        fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的
        cache[pageNum] = data;
      })
    } else {
      fpage.innerHTML = cache[pageNum];
    }
  }
  setPage(1); // 默认执行
</script>

로그인 후 복사

위 코드를 주의 깊게 읽으면 다음과 같은 현상을 발견할 수 있습니다.

1. setPage(pageNum)은 데이터베이스에서 데이터를 추출하기 위한 JS 함수 인터페이스입니다. 2. Ajax는 Article.php 파일을 통해 데이터를 얻습니다.
3. article.php?page=xx, 여기서 xx는 가져올 페이지 번호 데이터,
setPage(1): 1페이지의 데이터를 가져옵니다.
setPage(2): 2페이지의 데이터를 가져옵니다.
setPage(100): 100페이지의 데이터를 가져옵니다.
…

그렇다면, Article.php 파일에서 데이터를 어떻게 가져오나요? 아래 코드 목록을 참조하세요.

article.php

<&#63;php
/**
* $Id: article.php
* author Lee.
* Last modify $Date: 2012-01-21 16:53:05 $
*/
require_once './config.inc.php';
$m = new Model();
$page = new ajaxPage($m->total('article'),20); // $m->total('article') 获取 article 表的记录数；10为每页显示十条
$result = $m->fetchAll('article', '*', '', '', $page->limit); // 取出数据，^_^，很方便吧
echo '<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">';
echo '<caption><h1>华强电子网资讯</h1></caption>';
echo '<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>';
foreach ($result as $v) {
  echo "<tr height='21'><td align='center'>{$v['id']}</td><td>{$v['title']}</td><td align='center'>{$v['author']}</td><td align='center'>{$v['source']}</td><td align='center'>{$v['date']}</td></tr>";
}
echo '<tr><td align="right" colspan="5">'.$page->fpage().'</td></tr>';
echo '</table>';
&#63;>

로그인 후 복사

article.php에 연결된 데이터는 이전 글의 화강전자망에서 캡쳐한 정보 데이터입니다. 데이터가 비교적 크기 때문에 누구나 테스트할 수 있도록 코드 패키지 다운로드에 article.sql 파일을 첨부하겠습니다.

정적 페이지 index.html에 표시되는 데이터는 article.php 파일의 에코 코드입니다.

코드 파일의 config.inc.php 파일은 주로 데이터베이스 사용자 이름, 데이터베이스 비밀번호, 호스트..., 데이터베이스 연결 클래스 라이브러리(Db.class.php) 및 데이터베이스 작업 클래스 라이브러리(Model.php)와 같은 일부 상수를 정의합니다. class.php), 사용법 지침과 함께 "
PHP의 PDO 공통 클래스 라이브러리 예제 분석" 기사를 참조하세요.

프로그램 렌더링:

아래 사진은 주의할 곳을 표시한 것입니다

이렇게 Ajax 비새로고침 페이징이 완료되었습니다. 프로그램에는 설명되지 않은 ajaxPage.class.php도 있는데 사실 이 ajaxPage 클래스 라이브러리의 사용법은 일반 페이징 클래스 라이브러리와 동일합니다.

즉, $page = new ajaxPage(총 레코드 수, 페이지당 표시되는 수)

구체적인 내용은 코드를 다운로드하여 읽어보시기 바랍니다.

전체 예제 코드를 보려면 여기를 클릭하세요

이 사이트에서 다운로드하세요.

더 많은 PHP 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다. "

PHP Ajax 기술 및 애플리케이션 요약", "PHP 작업 및 연산자 사용 요약 ", "PHP 네트워크 프로그래밍 기술 요약", "PHP 기본 구문 튜토리얼 소개", "PHP 오피스 문서 기술 요약(워드, 엑셀 포함) , access, ppt)", "php 날짜 및 시간 사용 요약", "php 객체 지향 프로그래밍 입문 튜토리얼", "php 문자열(문자열) 사용법 요약" , "php mysql 데이터베이스 작업 입문 튜토리얼" 및 "php 일반 데이터베이스 작업 기술 요약"

이 기사가 PHP 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.