load data dynamically on page scroll using jquery ajax and php

Today, We want to share with you load data dynamically on page scroll using jquery ajax and php.In this post we will show you load data dynamically on page scroll using jquery ajax and mvc, hear for Load data dynamically on page scrolling using jQuery, Ajax, PHP, and MySQL we will give you demo and example for implement.In this post, we will learn about Data Auto Load While Scrolling Page Down With Jquery PHP And MySQL with an example.

Load Dynamic Data on Page Scroll using jquery AJAX in PHP MYSQL

  • db.php (database configuration file)
  • index.php (main UI file)
  • get-data.php (fetch data from database)
  • bootstrap folder (CSS and js)

Step 1: Database Configuration (db.php)

<?php
define('HOSTNAME','localhost');
define('DB_USERNAME','USERNAME');
define('DB_PASSWORD','PASSWORD');
define('DB_NAME', 'DATABASE_NAME');
//global $con;
$con = mysqli_connect(HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_NAME) or die ("error");
// Check connection
if(mysqli_connect_errno($con))  echo "Failed to connect MySQL: " .mysqli_connect_error();

Include Bootstrap Files (index.php)

step 2:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

HTML – Display Data (index.php)

Step 3:

<body>  
  <div class="container-fluid mtb-margin-top">
    <div class="row">
      <div class="col-md-12">
        <div id="output"><?php include('get-data.php');?></div>
        <div class="loader"><img src="loader.gif" /></div>
      </div>
    </div>
  </div>
</body>

jQuery and Ajax – Load Data Dynamically (index.php)

step 4:

<script type="text/javascript">
  $(window).scroll(function() {
   if($(window).scrollTop() == ($(document).height() - $(window).height())) {
     var all_count_page = parseInt($("#all_count_page").val());
     var page = parseInt($("#page").val())+1;
     if(page <= all_count_page) {
       load_more_data(page, all_count_page);
     } 
   }
  });
  
  function load_more_data(page, all_count_page) {     
   $("#all_count_page, #page").remove();     
   $.ajax({
     url: 'get-data.php',
     type: "POST",
     data: {page:page},
     beforeSend: function(){
       $(".loader").show();
     },
     complete: function(){
       $('.loader').hide();
       if(page == all_count_page) {
         $(".loader").html('... No more article! ...').show();
       }
     },
     success: function(data){
       $("#output").append(data);
     },
     error: function(){
       $(".loader").html("No data found!");
     }
   });
  }
</script>

PHP And MySQL – Fetch Data From Database (get-data.php)

step 5:

<?php include('db.php'); ?>
<?php

$limit = 10;
if(isset($_POST['page']) && $_POST['page'] != "") {
  $page = $_POST['page'];
  $offset = $limit * ($page-1);
} else {
  $page = 1;
  $offset = 0;
}
$query = "select count(*) 'total_rows' from `posts`";
$res = mysqli_fetch_object(mysqli_query($con, $query));
$all_count_page = ceil($res->total_rows/$limit);
$query  = "select * from `posts` limit $offset, $limit";
$res = mysqli_query($con, $query);
if(mysqli_num_rows($res) > 0) {
  $outputs = "";
  $outputs .= '<input type="hidden" name="all_count_page" id="all_count_page" value="' . $all_count_page . '">';
  $outputs .= '<input type="hidden" name="page" id="page" value="' . $page . '">';
  $outputs .= '<div id="outputs">';
  while($row = mysqli_fetch_object($res)) {
    $outputs .= '<h1 class="post-title"><a href="'.$row->link.'" target="_blank">'.$row->title.'</a></h1>';
    $outputs .= '<p class="text-justify">' . $row->content . '</p>';
  }
  $outputs .= '</div>';
  echo $outputs;
}
?>
<?php mysqli_close($con); ?>

I hope you get an idea about load content on scroll down jquery ajax.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.