In this tutorial, we will show you how to build a similar technique for load more data on click from the database using jQuery, Ajax, and PHP. Our Ajax based load more results with jQuery tutorial make the whole process simple. Let’s start the load more data from database tutorial.
HTML, jQuery and PHP Code
<?php
define('DB_SERVER', "localhost");
define('DB_USER', "root");
define('DB_PASS', "");
define('DB_DATABASE', "whatsappdwld_db");
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.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: 'getrecord.php',
data: {
getresult: val
},
success: function (response) {
var content = document.getElementById("result_para");
content.innerHTML = content.innerHTML + response;
document.getElementById("result_no").value = Number(val) + 2;
}
});
}
</script>
</head>
<body>
<center>
<p id="heading">How to Make Load More Results From Database using jQuery,Ajax,PHP and MySQL</p>
<div id="content">
<div id="result_para">
<?php
$select = mysqli_query($con, "SELECT * FROM language limit 0,2");
while ($row = mysqli_fetch_assoc($select)) {
echo "<p class='result'>" . $row['name'] . "<br>" . $row['description'] . "</p>";
}
?>
<input type="hidden" id="result_no" value="2">
<input type="button" id="load" value="Load More Results">
</div>
</div>
</center>
</body>
</html>PHP Code (getrecord.php)
<?php
define('DB_SERVER', "localhost");
define('DB_USER', "root");
define('DB_PASS', "");
define('DB_DATABASE', "whatsappdwld_db");
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
$no = $_POST['getresult'];
$select = mysqli_query($con,"SELECT * language LIMIT $no,2");
while ($row = mysqli_fetch_assoc($select)) {
echo "<p class='result'>" . $row['name'] . "<br>" . $row['description'] . "</p>";
}
?>
