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

2 min readSep 7, 2020

The Page scroll is a type of page load more data that doesn’t require the user to click a link to load dynamic data. Dynamic data is automatically loaded from the server as you scroll down the page. infinite scrolling is a convenient way to load additional content onto web pages. This effect is the best replacement for Load more or Pagination links to auto load dynamic content from the server.

Loading data while scrolling Use Ajax to load external database content with jQuery. When the user reaches the bottom of the web page, the data is fetched from the MySQL database and new content is loaded onto the web page as they scroll down the page. In this tutorial, we will show you how to load data as you scroll the page using jQuery, Ajax, PHP, and MySQL.

Create Database Table

Tables must be created in the database to store publishing information. The following SQL creates a publishing table with some basic fields in a MySQL database.

Database Configuration

The dbConnection.php file is used to connect and select the MySQL database. Specify the database hostname ($servername), username ($dbUsername), password ($dbPassword), and name ($databasename) as per your MySQL credentials.

jQuery & AJAX Code

The jQuery scroll () method is used to detect page scrolling, and an Ajax request is initiated when the user scrolls to the bottom of the page. Upon request from Ajax, the start published publication (start) is sent to the fetch_data.php file. After the successful Ajax method returns post data, HTML content is added to the post list.

Load Dynamic Data on Page Scroll in HTML & PHP Code

Add a database configuration file (dbConnection.php) for connecting and selecting databases. Now take a limited number of entries from the Post table and list them on the web page.