php ajax jquery는 더 많은 content_jquery를 로드하기 위해 클릭을 구현합니다.

일부 Weibo 웹사이트에서 이러한 애플리케이션을 볼 수 있습니다. Weibo 콘텐츠 목록은 페이징 바를 사용하지 않고 사용자가 목록 페이지를 탐색할 때 한 번에 특정 수의 기록을 로드하여 표시합니다. 목록 페이지에서 "더 보기"를 클릭하면 더 많은 기록을 로드할 수 있습니다. 이 기사에서는 jQuery와 PHP를 사용하여 이 애플리케이션을 구현하는 방법을 설명합니다.

기본 원리: 페이지가 로드되면 jQuery는 백그라운드에서 데이터를 요청하고 PHP는 데이터베이스를 쿼리하여 목록 페이지에 최신 레코드를 표시합니다. 링크를 트리거하면 Ajax 요청을 서버에 보냅니다. 백그라운드 PHP 프로그램은 요청 매개변수를 가져오고 응답합니다. 이는 데이터베이스에서 해당 레코드를 가져와 JSON 형식으로 프런트엔드 페이지에 반환합니다. 페이지 jQuery는 JSON 데이터를 구문 분석하고 데이터를 목록 페이지에 추가합니다. 실제로 이는 Ajax 페이징 효과입니다.

먼저 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> 

single_item 및 get_more 스타일이 jquery.more.js 플러그인과 관련되어 있다는 점을 언급할 가치가 있습니다. 다른 클래스 이름을 선택할 수도 있지만 구성 시 해당 클래스를 작성해야 합니다.

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는 이 예에서 사용자 정의되었습니다. 물론 실제 프로젝트에서는 다양한 스타일을 사용자 정의할 수 있습니다. more_loader_spinner는 애니메이션 이미지 로드를 정의합니다.

jQuery

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

사용 방법은 매우 간단합니다. 백엔드 주소: data.php를 구성하여 data.php가 데이터를 처리하는 방법을 확인하세요.

PHP

data.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']는 한 번에 표시되는 레코드 수입니다. 실제로는 페이징에 사용되는 명령문입니다.

그런 다음 쿼리 결과를 JSON 형식으로 출력하면 PHP 작업이 완료됩니다.

마지막으로 jquery.more.js의 매개변수 구성을 살펴보겠습니다.

'amount' : '10', //매회 표시되는 레코드 수
'address' : 'comments.php', //백그라운드 주소 요청
'format' : 'json', //데이터 전송 형식
'template' : '.single_item', //html은 DIV의 클래스 속성을 기록합니다
'trigger': '.get_more', //추가 레코드 로드를 트리거하는 클래스 속성
'scroll' : 'false', //스크롤 트리거 로딩 지원 여부
'offset' : '100', //스크롤하여 로딩을 트리거할 때 오프셋

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.