How to retrieve data from database in PHP using AJAX?

Hello friends, In the last post we have inserted values to our without refreshing our page. In this post we will learn how to retrieve data from database in php using ajax jquery method. We will fetch data from database without refreshing the webpage. So lets begin but before if you haven’t read the last post you can read it from here.

How to insert values to database in PHP using AJAX?

How to retrieve data from database in PHP using AJAX

Before going through the tutorial you can download the source code from the link given below.

[sociallocker id=”1372″] [download id=”1404″][/sociallocker]

Creating Database Table

First create a table inside your database. I have created a simple table named products as you can see in the below image.

how to retrieve data from database in php using ajax — Database Table

You also need to insert some values in your table as you can see above.

Creating HTML Page

Now we will create a simple html page with two dropdowns. In first dropdown we will see the brand list. When we change the brand list the other drop down will be loaded automatically by fetching the value from database.
You can use the following html code to create your page. Copy and save it as index.html in your project folder.

<!DOCTYPE html>

<html>

<head>

<title>PHP MySQL Insert Tutorial</title>

</head>

<body>

<option value='nokia'>nokia</option>

<option value='motorola'>motorola</option>

<option value='samsung'>samsung</option>

</select>

</select>

</body>

</html>

Creating PHP Script

Create a new php file named fetch.php in your project folder.
Copy the following code.

<?php

define('HOST','localhost');

define('USERNAME', 'root');

define('PASSWORD','');

define('DB','myDatabase');

$con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);

$brand = $_GET['brand'];

$sql = "select item from products where brand='$brand'";

$res = mysqli_query($con,$sql);

$result = array();

while($row = mysqli_fetch_array($res)){

array_push($result,

array('item'=>$row[0]));

}

echo json_encode(array('result'=>$result));

mysqli_close($con);

The above code is very simple. We are pushing all the records to an array. Finally we are displaying that array in json format. We will read this JSON using jQuery.

Finally Creating jQuery Script to Make it Work

Now we need execute our script using jQuery to get the JSON data.
We will change function in our select element. Use the following code

$('#brand').change(function(){

$.getJSON(

'fetch.php',

'brand='+$('#brand').val(),

function(result){

$('#item').empty();

$.each(result.result, function(){

$('#item').append('<option>'+this['item']+'</option>');

});

}

);

});

Copy and save the above code as fetch.js
And include the script to your html page.
Try executing your project now.

So thats it for this post about how to retrieve data from database in PHP using AJAX. If you had any confusion in my code or trouble in following the steps feel free to ask by your comments. Thank You 🙂