jquery를 사용하여 더 많은 목록을 표시하는 방법

Question

나는 PHP/MySQL로 메시지를 표시하고 표시합니다.

이제 10 개의 목록 만 표시하려고합니다.

버튼을 추가하고 싶습니다. 이 버튼을 클릭하면 매끄럽게 미끄러지며 총 10 개의 메시지가 표시됩니다.

그리고 버튼을 클릭하면 다시 내려와 총 30 개의 메시지가 표시됩니다.

jquery로 수행하는 방법을 가르쳐주세요.

미리 감사드립니다. 등이 표시되는 방법 많은 행에 대한 상태 정보,

를 개최 자바 스크립트

Answer 1

사용 버튼이 아약스를 통해 데이터를 반환하는 JS 함수를 호출하게한다. ajax 호출의 결과는 HTML 일 수 있고 div 태그에 삽입 될 수 있습니다. JS 함수는 상태 정보를 업데이트해야하며 (매번 행 수를 늘리는 등) 해당 상태 정보를 ajax 호출에 전달해야합니다.

ajax 호출의 대상은 MySQL 쿼리를 수행하고 전달 된 HTML을 생성하는 PHP 스크립트 일 수 있습니다.

Answer 2

원칙적으로 새로 가져온 모든 메시지를 보관할 컨테이너를 원합니다.

<input type="button" value="Fetch more messages" id="btnFetchMessages" /> 

장소 DOMReady 내부 어딘가에 인맥 :

var lastFetchedMessage = 0; 

$('#btnFetchMessages').click(function() { 
    $.ajax({ 
     url: '/getMessages.php', 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     data: '{"lastId":'+lastFetchedMesasge+'"}', 
     success: newMessagesReceived 
}); 

<div id="messages"> 
    <! -- message 1 --> 
    <! -- message 2 --> 
    <div id="newMessages"> 
    </div> 
</div> 

그런 다음 당신은 당신이 가져 - 더 - 방법까지 연결할 수 있습니다 버튼 (또는 앵커, 또는 무엇이든)을 원하는

버튼을 클릭하면 getMessages.php에게 AJAX 요청을 제출하고 lastFetchedMessage을보고 그에 따라 다음 10 개의 메시지를 보냅니다. 해당 페이지에서, 당신은 당신이 관심있는 모든 정보와 메시지를 포함하는 JSON 배열을 반환

을 성공적으로 AJAX의 reques시, newMessagesReceived가 호출 될 funciton :.

function newMessagesReceived(result) { 
    var container = $('#newMessages'); 

    for(var i = 0; i < result.length; i++) { 
     var message = $('<div>' + result[i].body + '</div>'); 
     container.append(message); 
    } 

    var lastFetchedMessage = result[i].id; 
} 

위를 내 최근 프로젝트에서

[ { "body": "new message1", "id": "10" }, { "body": "new message2", "id": "11" } ] 

Answer 3

내가 20 최신을 표시 jQuery tools scrollable를 사용 : 적어도 특성 body 및 id이 당신이 메시지와 배열을 반환한다고 가정 목록에있는 항목 (<ul><li>). 목록이 마지막 페이지로 스크롤되면 다음 20 개 항목을 가져온 다음 jquery 도구 api에서 빌드를 사용하여 목록 끝에 추가합니다. AJAX 요청이 빈 결과를 반환 할 때까지 계속 진행되며 데이터베이스에 더 이상 목록이 없음을 나타냅니다. 변수로 플래그를 가졌다면 False로 설정했기 때문에 목록이 마지막 페이지로 스크롤 될 때 AJAX 요청이 실행되지 않습니다.

트위터 홈 페이지처럼 보이지만 '추가'링크가없는 경우, 목록이 자동으로 첨부되기 때문에 볼 수 있습니다.

현재 프로젝트는 아직 알파 상태이므로 아직 여기에 표시 할 수 없습니다.당신은 그것을 시도하고 여기에 코드를 게시 할 수 있으며 그것을 조정할 수 있도록 도와 줄 것입니다.