이 글에서는 ajax 기술을 통해 새로 고치지 않는 로딩을 달성하는 방법을 소개합니다. 관심 있는 친구들은 함께 배울 수 있습니다.
먼저 렌더링을 보여드리겠습니다.
효과 Demonstration
이 예는 표시되지 않은 내용을 숨기지 않는 또 다른 표시 방법입니다. 데이터베이스 구조는 JavaScript 코드
fetch_pages.php와 동일합니다.
php code
<script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click var total_pages = <?php echo $total_pages; ?>; $('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load $(".load_more").click(function (e) { //user clicks on button $(this).hide(); //hide load more button on click $('.animation_image').show(); //show loading image if(track_click <= total_pages) //make sure user clicks are still less than total pages { //post page number and load returned data into result element $.post('fetch_pages.php',{'page': track_click}, function(data) { $(".load_more").show(); //bring back load more button $("#results").append(data); //append data received from server //scroll page to button element $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, ); //hide loading image $('.animation_image').hide(); //hide loading image once data is received track_click++; //user click increment on load button }).fail(function(xhr, ajaxOptions, thrownError) { alert(thrownError); //alert any HTTP error $(".load_more").show(); //bring back load more button $('.animation_image').hide(); //hide loading image once data is received }); if(track_click >= total_pages-) { //reached end of the page yet? disable load button $(".load_more").attr("disabled", "disabled"); } } }); }); </script>
jquery1.8 버전은 ajax를 사용하여 WeChat 통화에 대한 문제 분석 및 솔루션 구현
Jquery Ajax 요청 파일 다운로드 작업 실패 분석 및 솔루션
경량 ajax 컴포넌트 작성 01 - 비교 웹폼 플랫폼에서 다양한 구현 방법을위 내용은 Ajax를 기반으로 새로 고치지 않고 더 로드하려면 클릭하고 이 페이지로 로드하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!