php+jquery+html 클릭 하여 더 많은 인 스 턴 스 코드 를 새로 고침 하지 않 습 니 다.

기본 원리:페이지 를 불 러 올 때 jQuery 는 배경 에 데 이 터 를 요청 합 니 다.PHP 는 데이터 베 이 스 를 조회 하여 최신 기록 을 목록 페이지 에 표시 합 니 다.목록 페이지 의 아래쪽 에'더 많은'링크 가 있 습 니 다.이 링크 를 터치 하여 서버 에 Ajax 요청 을 보 냅 니 다.배경 PHP 프로그램 은 요청 파 라미 터 를 얻 고 해당 합 니 다.데이터베이스 에 해당 하 는 기록 을 가 져 와 JSON 형식 으로 프론트 페이지 에 되 돌려 주 고 프론트 페이지 jQuery 는 JSON 데 이 터 를 분석 하고 데 이 터 를 목록 페이지 에 추가 합 니 다.사실은 Ajax 페이지 효과 입 니 다.
HTML
먼저 jquery 라 이브 러 리 와 jquery.more.js 플러그 인 을 도입 해 야 합 니 다.jquery.more.js 는 이미 많은 기능 을 패키지 하고 매개 변수 설정 기능 을 제공 합 니 다.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.more.js"></script> 

xhtml 구 조 는 다음 과 같다.

<div id="more">   
<div class="single_item">      
<div class="element_head">        
<div class="date"></div>        
<div class="author"></div>       
</div>       
<div class="content"></div>   
</div>   
<a href="javascript:;" class="get_more">::        ::</a> </div> 

특히 스타일 singleitem，get_more 는 jquery.more.js 플러그 인과 연 결 된 것 입 니 다.다른 class 이름 도 지 을 수 있 지만 설정 할 때 해당 하 는 class 를 반드시 적어 야 합 니 다.
CSS

#more{margin:10px auto;width: 560px; 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;} 
.get_more{margin:10px; text-align:center} 
.more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) no-repeat;} 

상기 CSS 는 본 사례 에서 맞 춤 형 으로 제작 되 었 습 니 다.물론 실제 프로젝트 에서 서로 다른 스타일 을 맞 출 수 있 습 니 다.주의,moreloader_spinner 는 애니메이션 그림 을 불 러 오 는 것 을 정의 합 니 다.
jQuery

$(function(){   
$('#more').more({'address': 'data.php'}) 
}); 

사용 이 간단 합 니 다.배경 주 소 를 설정 하 였 습 니 다:data.php,data.php 가 데 이 터 를 어떻게 처리 하 는 지 보 겠 습 니 다.
PHP
data.php 는 데이터 베 이 스 를 연결 합 니 다.이 예 는 본 사이트 의 글 PHP+Mysql+jQuery 를 사용 하여 웨 이 보 프로그램 인 PHP 편 과 같은 데이터 표를 발표 합 니 다.

require_once('connect.php'); 
$last = $_POST['last']; $amount = $_POST['amount']; 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
$query=mysql_query("select * from say order by id desc limit $last,$amount"); 
while ($row=mysql_fetch_array($query)) {   
$sayList[] = array(     
'content'=>$row['content'],     
'author'=>$user[$row['userid']],     
'date'=>date('m-d H:i',$row['addtime'])    
); 
} 
echo json_encode($sayList); 

 data.php 는 프론트 페이지 에서 제출 한 두 개의 인 자 를 받 습 니 다.$POST['last']즉시 기록 수 를 시작 합 니 다.$POST['amount']는 한 번 에 기록 수 를 표시 하 는 것 으로 SQL 문 구 를 보면 알 수 있 습 니 다.사실은 페이지 에 사용 되 는 문구 입 니 다.
그리고 검색 결 과 를 JSON 형식 으로 출력 하면 PHP 작업 이 완 료 됩 니 다.
마지막 으로 jquery.more.js 의 매개 변수 설정 을 살 펴 보 겠 습 니 다.

'amount'   :  '10',      //        
'address'   :  'comments.php', //        
'format'   :  'json',     //       
'template'  :  '.single_item', //html  DIV class   
'trigger'   :  '.get_more',  //         class   
'scroll'   :  'false',    //           
'offset'   :  '100',     //            

이 글 은 DEMO 에서 클릭 해 야 더 많은 내용 을 불 러 올 수 있 습 니 다.다음 글 은 스크롤 바 를 통 해 더 많은 내용 을 불 러 오 는 DOMO 를 만 들 것 입 니 다.주목 하 시기 바 랍 니 다.
이상 의 php+jquery+html 를 클릭 하여 새로 고침 하지 않 고 더 많은 인 스 턴 스 코드 를 불 러 오 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.