Load Results From Database On Page Scroll Using jQuery,Ajax And PHP. > Html & Script

본문 바로가기
사이트 내 전체검색


회원로그인

오늘 117
어제 273
최대 618
전체 410,406
마음을 나누는 인터넷 일기장 - 통플 다이어리
Html & Script

Load Results From Database On Page Scroll Using jQuery,Ajax And PHP.

페이지 정보

작성자 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일16-04-06 16:39 조회2,767회 댓글0건

본문

In this tutorial we will create a system which will load results from database on page scrolling.Whenever the user scrolls from top to the bottom of the page the user gets more results from database automatically.With the help of this technique user dont have to go from 1 page to another and it also saves time and bandwidth. 

 


See Demo  

Load Results On Page Scroll


 

To Load Results From Database On Page Scroll it takes only Three steps:-

  1. Make a PHP file and define markup and script to Load Results
  2. Make a PHP file to get and send results from database
  3. Make a CSS file and define styling for Load Results System


 

Step 1.Make a PHP file and define markup and script to Load Results

We make a PHP file and save it with a name load.php

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="load_style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(window).scroll(function ()
    {
	  if($(document).height() <= $(window).scrollTop() + $(window).height())
	  {
		loadmore();
	  }
    });

    function loadmore()
    {
      var val = document.getElementById("row_no").value;
      $.ajax({
      type: 'post',
      url: 'get_results.php',
      data: {
       getresult:val
      },
      success: function (response) {
	  var content = document.getElementById("all_rows");
      content.innerHTML = content.innerHTML+response;

      // We increase the value by 10 because we limit the results by 10
      document.getElementById("row_no").value = Number(val)+10;
      }
      });
    }
</script>
  
</head>

<body>
  
  <h1>Load Results From Database On Page Scroll Using jQuery,Ajax And PHP</h1>
  <div id="all_rows">
    <?php

      mysql_connect('localhost','root','');
      mysql_select_db('demo');
      $select=mysql_query("select comment from sample_comment limit 0,10");
      while($row=mysql_fetch_array($select))
      {
  	    echo "<p class='rows'>".$row['comment']."</p>";
      }
    ?>
  </div>
  <input type="hidden" id="row_no" value="10">

</body>
</html>

 

In this step we fetch the results from our sample comments table in demo database you can use any data to display we want only 10 results at a time.And when the user scroll down the page and reached at the bottom then function is called which send the ajax request to get_results.php and fetch the next 10 comments and then display on user screen with previous one.


 

Step 2.Make a PHP file to get and send results from database

We make a PHP file named get_results.php

<?php

  if(isset($_POST['getresult']))
  {
    mysql_connect('localhost','root','');
    mysql_select_db('demo');

    $no = $_POST['getresult'];
    $select = mysql_query("select comment from sample_comment limit $no,10");
    while($row = mysql_fetch_array($select))
    {
      echo "<p class='rows'>".$row['comment']."</p>";
    }
    exit();
  }
  
?>

 

In this step we get the intial limit send by the ajax request which is used in query to get the further 10 results from database and then send back the results as a response to ajax request.


 

Step 3.Make a CSS file and define styling for Load Results System

We make a CSS file and save it with name load_style.css.

body
{
	font-family:helvetica;
	background-color:#58ACFA;
	width:100%;
}
h1
{
	text-align:center;
	font-size:35px;
	margin-top:50px;
	color:#0B173B;
}
.rows
{
	background-color:#0B3861;
    color:white;
	padding:20px;
	margin-top:40px;
	font-size:20px;
}

 

Thats all, this is how to load results from database on page scroll using jQuery,Ajax and PHP.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

추천 0

댓글목록

등록된 댓글이 없습니다.

Html & Script 목록

Total 192건 1 페이지
Html & Script 목록
번호 제목 글쓴이 날짜 조회 추천
공지 유니코드의 명칭과 속성 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 38380 38
191 [jQuery] preventDefault(), stopPropagation() nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-22 282 0
190 소스보기 막기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-22 528 0
189 (자바스크립트) Base64 인코딩/디코딩 소스(UTF-8 지원) nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-20 491 0
188 jquery iframe 제어하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-08 511 0
187 [펌] Web Worker - 웹에서 멀티 쓰레드 구현하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-10 466 0
186 CSS Text & Viewport units nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20 980 0
185 자바스크립트 replace / 문자열 변경하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-06 2621 0
184 날짜 및 시간 계산(JavaScript) nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-29 2945 0
183 동적으로 select의 option생성하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 3665 0
182 css ul li 가로 정렬 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-06 3322 0
181 자바스크립트 Attr 속성 추가 ,삭제, 조회하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 7937 0
180 오른쪽 마우스 클릭막기, 우클릭금지 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 3371 0
179 색상 코드표 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-19 3006 0
178 자바스크립트 in_array() nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-31 2096 0
177 (Jquery) radio checked 라디오 제어 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-21 2999 0
176 자바스크립트 날짜 차이 계산 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 2590 0
175 [AJAX] 1초마다 데이터 불러오기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 3269 0
열람중 Load Results From Database On Page Scroll Using jQ… nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 2768 0
173 [CSS] placeholder 컬러바꾸기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-06 2951 0
게시물 검색

Copyright © nuno21.net All rights reserved. 상단으로
모바일 버전으로 보기