How to fetch data from database without submitting HTML form Retrieving Data with jQuery AJAX Without Reloading Page

How To Retrieve Data From Database Using AJAX Without Submit 2

What is Ajax?

AJAX is the acronym for AsynchronousJavaScript & XML.

It is a technology that reduces the interactions between the server and client.

It does this by updating only part of a web page rather than the whole page.

The asynchronous interactions are initiated by JavaScript.

How To Retrieve Data From Database Using AJAX Without Submit

JavaScript is a client side scripting language. It is executed on the client side by the web browsers that support JavaScript.JavaScript code only works in browsers that have JavaScript enabled.

XML is the acronym for Extensible Markup Language. It is used to encode messages in both human and machine readable formats. It’s like HTML but allows you to create your custom tags. For more details on XML, see the article on XML

Why use AJAX?

  • It allows developing rich interactive web applications just like desktop applications.
  • Validation can be performed done as the user fills in a form without submitting it. This can be achieved using auto completion. The words that the user types in are submitted to the server for processing. The server responds with keywords that match what the user entered.
  • It can be used to populate a dropdown box depending on the value of another dropdown box
  • Data can be retrieved from the server and only a certain part of a page updated without loading the whole page. This is very useful for web page parts that load things like
    • Tweets
    • Commens
    • Users visiting the site etc. 

Database Connection file : config.php


<?php 
error_reporting(0); 
$mysqli=new mysqli("localhost","root","","jollofblog"); // database connection code ?>

Index.php file for the html and Ajax code


<html>
<head>

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css'>

<style>
body {
background-color: orange;
}

select.selectpicker {
display: block;
margin: 0 auto;
padding-left: 20px;
}
.btn-new {
background-color: white;
}
</style>

<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","get_loan_status_sql.php?q="+str,true);
xmlhttp.send();
}
</script>

</head>

<body>
<br>
<div align="center">
<h3 align="center">Tutorial - <a href="">View How To Retrieve Data From Database Using AJAX Without Submit</a></h3>
<form>

<select name="users" onchange="showUser(this.value)" class="selectpicker" data-style="btn-new">
<option value="">Select from the list:</option>
<option value="0">All Loan Customers</option>
<option value="1">All Active Loan Customers</option>
<option value="2">All Fully Paid Loan Customers</option>
<option value="3">All Overdue Loan Customers</option>
</select>
</form>
<div id="txtHint"><b>Information of the selected list will be displayed below</b></div>
</div>
</div>

</html>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js'></script>

get_loan_status_sql.php source code for get records from the database


<?php
include "config.php"; // called the database connection file here

$get_criteria= mysqli_real_escape_string($mysqli,$_GET['q']); // filter the input coming from the user's selection
?>
<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Ajax Live Data Search using Jquery PHP MySql With Pagination</title>
</head>
<body>

<div class="wrapper">
<div class="fresh-table full-color-orange full-screen-table">
<!-- Available colors for the full background: full-color-blue, full-color-azure, full-color-green, full-color-red, full-color-orange
Available colors only for the toolbar: toolbar-color-blue, toolbar-color-azure, toolbar-color-green, toolbar-color-red, toolbar-color-orange
-->

<table id="fresh-table" class="table">
<thead>
<th data-field="id">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="country" data-sortable="true">Country</th>
<th data-field="city">City</th>
<th data-field="salary" data-sortable="true">Loan Amount</th>
<th data-field="actions" data-formatter="operateFormatter" data-events="operateEvents">Actions</th>
</thead>
<?php
$c=0; // initialize a counter for serial number her
$sql1=mysqli_query($mysqli,"SELECT * FROM ajax_php_jquery_live_search A WHERE A.status='$get_criteria'"); // sql statement to fetch record based on the status picked
while($row = mysqli_fetch_array($sql1))
{
$c++;
extract($row);
?>

<tbody>
<tr>

<td><?php echo $c;?></td>
<td><?php echo $name;?></td>
<td><?php echo $country;?></td>
<td><?php echo $city;?></td>
<td><?php echo number_format($amount,2);?></td>
<td></td>
</tr>
</tbody>
<?php } ?>
</table>
</div>

</div>
</body>

How to fetch data from database without submitting HTML form Retrieving Data with jQuery AJAX Without Reloading Page How to fetch data from database without submitting HTML form Retrieving Data with jQuery AJAX Without Reloading Page