How to make a page scroll down automatically load data from Mysql Database using PHP, jQuery

Authors: CodeToday | PHP Code | Views: 1183 | Posted: 03 AM: 10/04/2017

In this article I will guide you to create a page scroll down automatically. The purpose is to create a page that loads data from the databse automatically when scrolling down, so there's no need to create pagination for the data to show. But its minus point is that the search engines will have trouble crawling the data because the data is passed through jquery.

The steps are as follows:
  1. Create a database for storing data
  2. Create the connect.php file to connect the database and PHP code
  3. Generate jquery code
  4. Create the load_more.php file to receive the retrieved data from jquery
  5. Create an index.php file to display the first data

1. Create a database

This database will contain titles and summaries of the articles in the title and short fields

CREATE TABLE `load_more` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(255) collate utf8_unicode_ci default NULL,
  `short` text collate utf8_unicode_ci,
  `status` enum('false','true') collate utf8_unicode_ci default 'true',
  PRIMARY KEY  (`id`)

2. connect.php

mysql_connect("localhost", "root", "admin") or die("Could not connect"); 
mysql_select_db("code") or die("Could not select database"); 

Here I put username = root, password = admin. You must adjust the connection parameters to suit your system

3. Jquery code

<script type="text/javascript">
$(window).scroll(function () {
	if($(document).height() <= $(window).scrollTop() + $(window).height())	  {
function load_more()  {
	var val = document.getElementById("next_content").value;
		type: 'post',
		url: 'load_more.php',
		data: {
    success: function (response) {
		var content = document.getElementById("first_content");
		content.innerHTML = content.innerHTML+response;
		document.getElementById("next_content").value = Number(val)+2;

4. load_more.php

include 'connect.php';
$page = $_POST['page'];
if(isset($page )) {
$sql = mysql_query("SELECT title, short FROM load_more LIMIT $page,2");
while($row = mysql_fetch_array($sql))    {
	echo "<h3 class='text-primary'>".$row['title']."</h3>";
	echo '<p>'.$row['short'].'</p>';
} mysql_free_result($sql);

5. index.php

include 'connect.php';
echo '<div id="first_content">';
$sql = mysql_query("SELECT title, short FROM load_more LIMIT 0,5");
while($row = mysql_fetch_array($sql)){
  	echo "<h3 class='text-primary'>".$row['title']."</h3>";
	echo '<p>'.$row['short'].'</p>';
} mysql_free_result($sql);
echo '</div>';
echo '<input type="hidden" id="next_content" value="5">';

After completing the above steps you will see the results as shown below:

How to make a page scroll down automatically load data from Mysql Database using PHP, jQuery

If you have any questions, please leave a message below