PHP+Ajax 페이지 새로 고침 없 는 인 스 턴 스 상세 설명(데모 원본 다운로드 첨부)
5492 단어 PHPAjax페이지 새로 고침 없 음
주:여기 사 용 된 일부 라 이브 러 리 는 앞의 글 에서 소스 코드 를 찾 을 수 있 기 때문에 문장의 편폭 을 줄 이기 위해 링크 가 있 는 곳 을 가리킨다.
본 고 는 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 를 통 해 데이터베이스 에서 데 이 터 를 얻 을 수 있 는 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>';
?>
정적 페이지 index.html 에 표 시 된 데 이 터 는 article.php 파일 의 echo 코드 입 니 다.
코드 파일 에 있 는 config.inc.php 파일 은 주로 상량 을 정의 합 니 다.예 를 들 어 데이터베이스 사용자 이름,데이터베이스 비밀번호,호스트.
프로그램 효과 도:
아래 그림 에 표 시 된 것 은 관심 을 가 지 는 곳 이다.
이렇게 해서 Ajax 는 페이지 를 새로 고침 하지 않 고 완성 되 었 습 니 다.프로그램 에 ajax Page.class.phop 이 설명 되 지 않 았 습 니 다.사실 이 ajax Page 라 이브 러 리 의 사용 방법 은 일반적인 페이지 라 이브 러 리 와 같 습 니 다.
즉:$page=new ajax Page(총 수 를 기록 하고 페이지 당 표시 수);
구체 적 인 세부 사항 은 코드 를 다운로드 하여 읽 으 시 면 됩 니 다.
전체 인 스 턴 스 코드 는 여 기 를 클릭 하 십시오간단 한 Ajax 라 이브 러 리 및 사용 방법 인 스 턴 스 분석
더 많은 PHP 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 논문 에서 말 한 것 이 여러분 의 PHP 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
laravel에 yo에서 angularJs&coffeescript를 사용할 수 있도록 한다.먼저 yo 명령을 사용할 수 있어야하므로 아래에서 설치 global에 설치한 곳에서 laravel의 프로젝트 루트로 이동. 클라이언트 코드를 관리하는 디렉토리를 만들고 이동합니다. 클라이언트 환경 만들기 이것으로 히...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
