Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Load Data From Database Without Page Refresh Using Ajax and jQuery.

Tuesday, Apr 4, 2017

Tags:- Ajax JavaScript jQuery PHP

In this tutorial we will teach you how to load the data from database without page refresh and then display the data using Ajax and jQuery.You only need to download jQuery to get the data from database without page refresh.You may also like load data from database on page scroll.

Load data from database without page refresh

To Load the data from database without page refresh it takes only two steps:-

  1. Make a HTML form to load the data
  2. Connect to the database and send data

Step 1.Make a HTML form to load the data

We make a HTML form with post method and save it with a name displaydata.html

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

function loaddata()
 var name=document.getElementById( "username" );
  type: 'post',
  url: 'loaddata.php',
  data: {
  success: function (response) {
   // We get the element having id of display_info and put the response inside it
   $( '#display_info' ).html(response);
  $( '#display_info' ).html("Please Enter Some Words");


<input type="text" name="username" id="username" onkeyup="loaddata();">
<div id="display_info" >

You can do validation to make your code more secure or you can view our How to do validation before and after submitting the form tutorial.

Step 2.Connect To The Database and Send Data

In this step we connect to our sample database named student and it has a table named student_info which has 3 columns name,age,course and then we query the database and get desired results.

// loaddata.php


if( isset( $_POST['user_name'] ) )

$name = $_POST['user_name'];

$host = 'localhost';
$user = 'root';
$pass = ' ';

mysql_connect($host, $user, $pass);


$selectdata = " SELECT age,course FROM student_info WHERE name LIKE '$name%' ";

$query = mysql_query($selectdata);

while($row = mysql_fetch_array($query))
 echo "<p>".$row['age']."</p>";
 echo "<p>".$row['course']."</p>";


Whatever this page echo's it display on the displaydata.html page.You can also view load more results from database using ajax.

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

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH