Example – Load Data on Page Scroll using PHP jQuery Ajax from MySQL Database

1

Database Table Creation

Create a table named posts into the database (for example tutspointer). Example SQL query for creating posts table is given below.

Data will be fetched from this posts table and display in the data list. So, insert some data into the posts table for testing purpose.

Database Configuration (dbConfig.php)

dbConfig.php is a configuration file, in this file, we’ll create a database connection and select MySQL database.

index.php File

This file contains some JavaScript and PHP code. On page load, the initial data is displayed from the posts table and more data would be fetched from the database while page scrolling.

JavaScript Code:
Load the JS library before writing JavaScript Code.

On page scroll, we’ll get the last displayed post ID (lastID) and the next posts from the getData.php file using Ajax. Once Ajax successmethod returns the posts data, the posts HTML would be appended to posts list.

PHP & HTML Code:

getData.php File

Using the getData.php file, we’ll fetch the posts data from the MySQL database based on the last post ID and generate the posts list HTML. Ajax success method gets this HTML and renders the HTML content to the respective DIV element.

CSS Code

In our example script, the following CSS has used to design the posts list.

 

Leave A Reply

Your email address will not be published.