Create Load More Results From Database System Using jQuery,Ajax,PHP and MySQL.

Tuesday, Apr 4, 2017

Tags:- Ajax jQuery PHP MySQL


Load More Results from database system is a modern and common technique to fetch results from database you have seen this technique in many websites.In this tutorial we will create a load more results from database system using jQuery, Ajax, PHP, MySQL.You may also like load results from database on page scroll using ajax and PHP.


See Demo
Load More Results


To create a Load More Results System it takes only three steps:-

  1. Make a PHP file and define markup and script for load more results system
  2. Make a CSS file and define styling for load more results system
  3. Connect to the database and send data


Step 1.Make A PHP file and define markup and script for load more result system

We make a PHP file and save it with a name load.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="load_style.css">
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 $("#load").click(function(){
  loadmore();
 });
});

function loadmore()
{
 var val = document.getElementById("result_no").value;
 $.ajax({
 type: 'post',
 url: 'fetch.php',
 data: {
  getresult:val
 },
 success: function (response) {
  var content = document.getElementById("result_para");
  content.innerHTML = content.innerHTML+response;

  // We increase the value by 2 because we limit the results by 2
  document.getElementById("result_no").value = Number(val)+2;
 }
 });
}
</script>

</head>

<body>

<center>
 <p id="heading">Load More Results From Database Using Ajax,jQuery,PHP and MySQL</p>
 <div id="content">
  <div id="result_para">
  <?php
  mysql_connect('localhost','root','');
  mysql_select_db('demo');
  
  $select = mysql_query("select * from language limit 0,2");
  while($row = mysql_fetch_array($select))
  {
   echo "<p class='result'>".$row['name']."<br>".$row['description']."</p>";
  }
  ?>
  
  // We set the initial value 2 because we want only 2 results at a time
  <input type="hidden" id="result_no" value="2">
  <input type="button" id="load" value="Load More Results">
  </div>
 </div>
</center>

</body>
</html>

In this step we fetch the results from our language table in demo database we want only 2 results at a time.We make load more result button that sends the ajax request to fetch.php file to get 2 more results.You may also like load data from database without page refresh.



Step 2.Make a CSS file and define styling for load more results system

We make a CSS file and save it with name load_style.css.

body
{
 background-color:#E6E6E6;
 font-family:helvetica;
}
#heading
{
 margin-top:150px;
 width:600px;
 font-size:27px;
 color:#2E2EFE;
}
.result
{
 text-align:left;
 background-color:grey;
 width:400px;
 padding:10px;
 box-sizing:border-box;
 color:#F2F2F2;
 border-radius:3px;
 border:1px solid #424242;
 font-style:italic;
}
#load
{
 width:400px;
 height:40px;
 color:brown;
 background-color:brown;
 border-radius:3px;
 color:white;
 border:none;
 font-size:17px;
}


Step 3.Connect to the database and send data

We make a PHP file save it with a name fetch.php which is used to get and send data to load.php file on ajax request.

<?php
 mysql_connect('localhost','root','');
 mysql_select_db('demo');

 $no = $_POST['getresult'];
 $select = mysql_query("select * language limit $no,2");
 while($row = mysql_fetch_array($select))
 {
  echo "<p class='result'>".$row['name']."<br>".$row['description']."</p>";
 }
?>

That's all, this is how to load more results from database using Ajax, jQuery, PHP and MySQL. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials
And Offers Via Email

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.