PHP+Ajax를 사용하여 새로 고침 없는 페이징 기능을 구현하는 방법-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

PHP+Ajax를 사용하여 새로 고침 없는 페이징 기능을 구현하는 방법

墨辰丷

May 21, 2018 am 09:41 AM

phpphp+ajax기능

이 글에서는 주로 PHP+Ajax에서 구현한 non-refresh 페이징 기능을 소개하고 있으며, pdo 연산 클래스를 통해 PHP+ajax 관련 구현 기술을 분석하여 특정 예제를 기반으로 데이터베이스를 읽고 페이징에 표시하는 내용도 함께 제공됩니다. 독자들이 참조용으로 다운로드할 수 있는 데모 소스 코드입니다. 필요한 친구는 참조할 수 있습니다.

자세한 내용은 다음과 같습니다.

참고: 이 문서에 사용된 일부 클래스 라이브러리는 이전 문서에서 소스 코드를 찾을 수 있습니다. 글의 길이를 단축하기 위해 기사 내 링크를 표시하겠습니다. 읽기 불편을 드려 죄송합니다.

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

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

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

2. 그러면 Ajax 비새로고침 페이지는 동적 페이지(.php)에서 실행되나요? 아니면 정적 페이지(.html/.htm/.shtml)입니까? 대답은: 정적 페이지입니다.

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

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

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

index.html

<!DOCTYPE html>

<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>
 <p id="fpage">数据加载中...</p>
</body>
</html>

코드 목록에서 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(&#39;fpage&#39;); // 获取 fpage 对象
  // 如果缓存中存在数据，那么直接从缓存中读取；如果不存在数据，那么就从数据库中读取，并把数据存入缓存
  if (typeof(cache[pageNum])==&#39;undefined&#39;) {
   var ajax = Ajax();
   ajax.get(&#39;article.php?page=&#39;+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): 첫 번째 페이지 데이터를 얻습니다. setPage(2): 2페이지의 데이터를 가져옵니다.
setPage(100): 100페이지의 데이터를 가져옵니다.
...
그러면 article.php 파일에서 데이터를 가져오는 방법은 무엇입니까? 아래 코드 목록을 참조하세요.

article.php

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

article.php에 연결된 데이터는 이전 글에서 화창전자망에서 캡쳐한 정보 데이터인데, 데이터 용량이 상대적으로 크기 때문에 article.sql 파일을 첨부하겠습니다. 모두가 테스트할 수 있도록 코드 패키지를 다운로드하세요.

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

코드 파일의 config.inc.php 파일은 주로 데이터베이스 사용자 이름, 데이터베이스 비밀번호, 호스트..., 데이터베이스 연결 클래스 라이브러리(Db.class.php) 및 데이터베이스 작업 클래스 라이브러리( 모델.class.php).

프로그램 렌더링:

아래 그림은 주의해야 할 장소를 표시합니다.

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

즉:

$page = new ajaxPage(记录总数, 每页显示数);

관련 기사

절대 세션 타임 아웃의 차이점은 무엇입니까?May 03, 2025 am 12:21 AM

절대 세션 시간 초과는 세션 생성시 시작되며, 유휴 세션 시간 초과는 사용자가 작동하지 않아 시작합니다. 절대 세션 타임 아웃은 금융 응용 프로그램과 같은 세션 수명주기의 엄격한 제어가 필요한 시나리오에 적합합니다. 유휴 세션 타임 아웃은 사용자가 소셜 미디어와 같이 오랫동안 세션을 활성화하려는 응용 프로그램에 적합합니다.

세션이 서버에서 작동하지 않으면 어떤 조치를 취 하시겠습니까?May 03, 2025 am 12:19 AM

서버 세션 고장은 다음 단계를 따라 해결할 수 있습니다. 1. 서버 구성을 확인하여 세션이 올바르게 설정되었는지 확인하십시오. 2. 클라이언트 쿠키를 확인하고 브라우저가 지원하는지 확인하고 올바르게 보내십시오. 3. Redis와 같은 세션 스토리지 서비스가 정상적으로 작동하는지 확인하십시오. 4. 올바른 세션 로직을 보장하기 위해 응용 프로그램 코드를 검토하십시오. 이러한 단계를 통해 대화 문제를 효과적으로 진단하고 수리 할 수 있으며 사용자 경험을 향상시킬 수 있습니다.

session_start () 함수의 중요성은 무엇입니까?May 03, 2025 am 12:18 AM

session_start () iscrucialinphpformanagingUsersessions.1) itiniteSanewsessionifnoneexists, 2) ResumesAnxistessions, and3) setSasessionCookieForContInuityAcrosrequests, enablingplicationsirecationSerauthenticationAndpersonalizestContent.

세션 쿠키를 위해 httponly 플래그를 설정하는 것이 중요합니까?May 03, 2025 am 12:10 AM

XSS 공격을 효과적으로 방지하고 사용자 세션 정보를 보호 할 수 있기 때문에 httponly 플래그를 설정하는 것은 세션 쿠키에 중요합니다. 구체적으로, 1) httponly 플래그는 JavaScript가 쿠키에 액세스하는 것을 방지합니다. 2) PHP 및 Flask에서 SetCookies 및 Make_response를 통해 깃발을 설정할 수 있습니다. 3) 모든 공격으로부터 방지 할 수는 없지만 전체 보안 정책의 일부가되어야합니다.

웹 개발에서 PHP 세션은 어떤 문제를 해결합니까?May 03, 2025 am 12:02 AM

phpssessionssolvetheproblemofmainingstateacrossmultiplehtttprequestsbystoringdataontheserversociatingititwithauniquessessionid.1) theStoredAserver-side, 일반적으로, 일반적으로 and insessionsecietoretoretrievedata.2) sessionsenhances

PHP 세션에 어떤 데이터를 저장할 수 있습니까?May 02, 2025 am 12:17 AM

phpsessionscanstorestrings, 숫자, 배열 및 객체 1.Strings : TextDatalikeUsernames.2.numbers : integorfloatsforcounters.3.arrays : listslikeshoppingcarts.4.objects : complexStructuresThatareserialized.

PHP 세션을 어떻게 시작합니까?May 02, 2025 am 12:16 AM

tostartAphPessession, us

세션 재생이란 무엇이며 보안을 어떻게 개선합니까?May 02, 2025 am 12:15 AM

세션 재생은 세션 고정 공격의 경우 사용자가 민감한 작업을 수행 할 때 새 세션 ID를 생성하고 이전 ID를 무효화하는 것을 말합니다. 구현 단계에는 다음이 포함됩니다. 1. 민감한 작업 감지, 2. 새 세션 ID 생성, 3. 오래된 세션 ID 파괴, 4. 사용자 측 세션 정보 업데이트.

See all articles