PHP+Ajax 페이지 새로 고침 없 는 인 스 턴 스 상세 설명(데모 원본 다운로드 첨부)

이 사례 는 PHP+Ajax 가 페이지 를 새로 고침 하지 않 는 방법 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
주:여기 사 용 된 일부 라 이브 러 리 는 앞의 글 에서 소스 코드 를 찾 을 수 있 기 때문에 문장의 편폭 을 줄 이기 위해 링크 가 있 는 곳 을 가리킨다.
본 고 는 Ajax 가 페이지 를 새로 고치 지 않 고 원리,코드 전시,코드 다운 로드 를 실현 하 는 것 을 설명 한다.
여기에 지식 을 설명해 야 한다.
1.Ajax 는 페이지 를 새로 고침 하지 않 는 장점 이 있 습 니 다.좋 은 고객 체험 을 제공 하고 Ajax 를 통 해 배경 에서 데이터 베 이 스 를 얻 고 보 여 주 며 페이지 를 불 러 오 기 를 기다 리 는 공백 상 태 를 단속 합 니 다.
2.그러면 Ajax 새로 고침 없 는 페이지 는 동적 페이지(.php)에서 실 행 됩 니까?아니면 정적 페이지(html/.html/.shtml)입 니까?정 답:정적 페이지;
3.실현 원리:전단 JS 스 크 립 트 프로그램 과 Ajax 를 결합 하여 동적 페이지 에서 되 돌아 오 는 데 이 터 를 얻 고 표시 합 니 다.
자,다음은 코드 설명 을 진행 하 겠 습 니 다.
정적 페이지 에서 실행 되 는 이상 정적 HTML 페이지 를 만 듭 니 다.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 를 통 해 데이터베이스 에서 데 이 터 를 얻 을 수 있 는 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?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):첫 페이지 의 데 이 터 를 얻 는 것 입 니 다.
setPage(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 './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>';
?>

article.php 에 연 결 된 데 이 터 는 앞에서 화 강 전자 망 에서 잡 은 정보 데이터 입 니 다.데이터 가 비교적 크기 때문에 코드 패키지 다운로드 에 article.sql 파일 을 추가 하여 테스트 할 수 있 습 니 다.
정적 페이지 index.html 에 표 시 된 데 이 터 는 article.php 파일 의 echo 코드 입 니 다.
코드 파일 에 있 는 config.inc.php 파일 은 주로 상량 을 정의 합 니 다.예 를 들 어 데이터베이스 사용자 이름,데이터베이스 비밀번호,호스트.
프로그램 효과 도:
아래 그림 에 표 시 된 것 은 관심 을 가 지 는 곳 이다.

이렇게 해서 Ajax 는 페이지 를 새로 고침 하지 않 고 완성 되 었 습 니 다.프로그램 에 ajax Page.class.phop 이 설명 되 지 않 았 습 니 다.사실 이 ajax Page 라 이브 러 리 의 사용 방법 은 일반적인 페이지 라 이브 러 리 와 같 습 니 다.
즉:$page=new ajax Page(총 수 를 기록 하고 페이지 당 표시 수);
구체 적 인 세부 사항 은 코드 를 다운로드 하여 읽 으 시 면 됩 니 다.
전체 인 스 턴 스 코드 는 여 기 를 클릭 하 십시오간단 한 Ajax 라 이브 러 리 및 사용 방법 인 스 턴 스 분석
더 많은 PHP 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 논문 에서 말 한 것 이 여러분 의 PHP 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기