On page scroll Down load data dynamically using php jquery ajax

Learn here to load data from database and display in the website dynamically. When I say dynamically, it means that there is no need to reload the page every time you try to access data from the database. This would be nice, since it will take lesser time for the user to actually see the results of his query.When you perform the scroll operation in your webpage. Ajax requested is initiated and return the response data. we are then append the response data to the existing data.Each time when ajax request is fired it automatically append to the existing data.


To implement the load on scroll functionality, we will require very few lines of code. A WebMethod that will be called from the client side which returns the content to append while scrolling, and a client side function (document.ready) where we will bind the scroll event to load data from the server. Let us see these server and client side methods in detail.


function getresult(url) {
			url: url,
			type: "GET",
			data:  {rowcount:$("#rowcount").val()},
			beforeSend: function(){
			complete: function(){
			success: function(data){
			error: function(){} 	        
		if ($(window).scrollTop() == $(document).height() - $(window).height()){
			if($(".pagenum:last").val() < $(".total-page").val()) {
				var pagenum = parseInt($(".pagenum:last").val()) + 1;

This method is used to get data from the database or any source and prepares an HTML string depending on the control you are using for appending data to.

PHP - fetchdata.php

    foreach ($faq as $k => $v) {
        $output .= '

' . $faq[$k]["productName"] . '

$' . $faq[$k]["productPrice"] . '
  • ' . substr($faq[$k]["productDescription"], 0, 50) . '
'; } } print $output; ?>

By posted on - 14th Feb 2016

Social Oauth Login

Personalized Map Navigation

Online Image Compression Tool

Image Compression


Recent Posts