Infinity Scroll/Lazy Loading using AJAX in PHP and MySQL
- Tech Area
- October 23, 2023
In this tutorial, We will learn how to make infinity scroll or lazy loading using Jquery AJAX in PHP and MySQL. We are loading data from database on page scroll down using AJAX.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (AJAX script)
3- load-data.php (fetch data)
Below are the step by step process of how to make infinity scroll using Jquery AJAX.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: Create index.php
In this step, create a new file index.php. This is the main file used to implement AJAX to make infinity scroll using AJAX.
This screenshot shows the infinity scroll data.
index.php
<!DOCTYPE html>
<style>
.table td
{
height: 105px;
}
</style>
<head>
<title>AJAX Infinity Scroll</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center">Infinity Scroll using Jquery AJAX</h2>
<br/>
<table id="result" class="table table-bordered table-striped">
<thead style="background-color:#e3a53a;">
<th>Id</th>
<th>Data</th>
</thead>
</table>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
var limit_val = 5;
var start_val = 0;
loaddata(limit_val,start_val);
function loaddata(limit_val,start_val)
{
$.ajax({
url: 'load-data.php',
method: 'post',
data: {limit_page: limit_val, page_start: start_val},
success: function(result)
{
$('#result').append(result);
}
});
}
$(window).scroll(function(){
if($(window).scrollTop()>=$(document).height()-$(window).height())
{
start_val = start_val+limit_val;
loaddata(limit_val,start_val);
}
});
});
</script>Step 3: Create new file for load data
In this step, create a new file load-data.php. This file used to make infinity scroll.
load-data.php
<?php
include("connection.php");
if(isset($_POST['limit_page'], $_POST['page_start']))
{
$limit_page = $_POST['limit_page'];
$page_start = $_POST['page_start'];
$fetch_query = mysqli_query($connection, "select * from tbl_data limit $page_start, $limit_page");
$row = mysqli_num_rows($fetch_query);
if($row>0)
{
$output="";
while($res = mysqli_fetch_array($fetch_query))
{
$output .="<tbody><tr>
<td>{$res['id']}</td>
<td>{$res['data']}</td>
</tr></tbody>";
}
echo $output;
}
}
?>Download Source Code
Join 10,000+ subscriber