Ajax with Jquery is very useful for send and received data to server without refresh of web page. So by using Ajax here we have send request to PHP script for received data in JSON and displaying that data on web page. If you have used Ajax for your application then in it will received in data in many formats like text, html, json etc. But in all of then JSON datatype is a very lightweight in sending and receiving data from server and it will increase the execution speed of your web application.
In this post we will discuss seen how can we send Ajax request to PHP script for receiving data in JSON format and by using Jquery we will display that data on webpage without refresh of web page. By using this type of data type you can exchange large amount of data without waiting of time.
For learning this topic we will see simple searching of employee data from selecting employee name from select box and then after we will convert this data into json format and send back ajax request and after this we will display data on web page. This way we have make simple search application in which we can search all employee details on single click on search button and we have received employee data on web page. Here we have send ajax request to php script with employee id data and based on that it will search employee details from table and store into local variable in array format and after this it will convert into json format and send back to ajax request and by using jquery code it will display data on web page.
Source Code
index.php
<?php
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM employee ORDER BY name ASC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>How to return JSON Data from PHP Script using Ajax Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#result {
position: absolute;
width: 100%;
max-width:870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
.link-class:hover{
background-color:#f1f1f1;
}
</style>
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">How to return JSON Data from PHP Script using Ajax Jquery</h2>
<h3 align="center">Search Employee Data</h3><br />
<div class="row">
<div class="col-md-4">
<select name="employee_list" id="employee_list" class="form-control">
<option value="">Select Employee</option>
<?php
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row["id"].'">'.$row["name"].'</option>';
}
?>
</select>
</div>
<div class="col-md-4">
<button type="button" name="search" id="search" class="btn btn-info">Search</button>
</div>
</div>
<br />
<div class="table-responsive" id="employee_details" style="display:none">
<table class="table table-bordered">
<tr>
<td width="10%" align="right"><b>Name</b></td>
<td width="90%"><span id="employee_name"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Address</b></td>
<td width="90%"><span id="employee_address"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Gender</b></td>
<td width="90%"><span id="employee_gender"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Designation</b></td>
<td width="90%"><span id="employee_designation"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Age</b></td>
<td width="90%"><span id="employee_age"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#search').click(function(){
var id= $('#employee_list').val();
if(id != '')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{id:id},
dataType:"JSON",
success:function(data)
{
$('#employee_details').css("display", "block");
$('#employee_name').text(data.name);
$('#employee_address').text(data.address);
$('#employee_gender').text(data.gender);
$('#employee_designation').text(data.designation);
$('#employee_age').text(data.age);
}
})
}
else
{
alert("Please Select Employee");
$('#employee_details').css("display", "none");
}
});
});
</script>
fetch.php
<?php
//fetch.php
if(isset($_POST["id"]))
{
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM employee WHERE id = '".$_POST["id"]."'";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$data["name"] = $row["name"];
$data["address"] = $row["address"];
$data["gender"] = $row["gender"];
$data["designation"] = $row["designation"];
$data["age"] = $row["age"];
}
echo json_encode($data);
}
?>
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `employee`
--
CREATE TABLE IF NOT EXISTS `employee` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL
) ENGINE=MyISAM AUTO_INCREMENT=29 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `employee`
--
INSERT INTO `employee` (`id`, `name`, `address`, `gender`, `designation`, `age`) VALUES
(1, 'John Smith', '656 Edsel Road\r\nSherman Oaks, CA 91403', 'Male', 'Manager', 40),
(5, 'Clara Berry', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Male', 'Programmer', 22),
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Falling', 32),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29),
(9, 'Beau L. Clayton', '3588 Karen Lane\r\nLouisville, KY 40223', 'Male', 'Extractive metallurgical engin', 33),
(10, 'Ramona W. Burns', '2170 Ocala Street\r\nOrlando, FL 32801', 'Female', 'Electronic typesetting machine operator', 27),
(11, 'Jennifer A. Morrison', '2135 Lakeland Terrace\r\nPlymouth, MI 48170', 'Female', 'Rigging chaser', 29),
(12, 'Susan Juarez', '3177 Horseshoe Lane\r\nNorristown, PA 19403', 'Male', 'Control and valve installe', 52),
(13, 'Ellan D. Downie', '384 Flynn Street\r\nStrongsville, OH 44136', 'Female', 'Education and training manager', 26),
(14, 'Larry T. Williamson', '1424 Andell Road\r\nBrentwood, TN 37027', 'Male', 'Teaching assistant', 30),
(15, 'Lauren M. Reynolds', '4798 Echo Lane\r\nKentwood, MI 49512', 'Female', 'Internet developer', 22),
(16, 'Joseph L. Judge', '3717 Junkins Avenue\r\nMoultrie, GA 31768', 'Male', 'Refrigeration mechanic', 35),
(17, 'Eric C. Lavelle', '1120 Whitetail Lane\r\nDallas, TX 75207', 'Male', 'Model', 21),
(18, 'Cheryl T. Smithers', '1203 Abia Martin Drive\r\nCommack, NY 11725', 'Female', 'Personal banker', 23),
(19, 'Tonia Diaz', '4724 Rocky Road\r\nPhiladelphia, PA 19107', 'Female', 'Facilitator', 29),
(20, 'Stephanie P. Lederman', '2117 Larry Street\r\nWaukesha, WI 53186', 'Female', 'Mental health aide', 27),
(21, 'Edward F. Sanchez', '2313 Elliott Street\r\nManchester, NH 03101', 'Male', 'Marine oilerp', 28),
(25, 'Peter Parker', '403 Snyder Avenue Charlotte, NC 28208', 'Male', 'Programmer', 28),
(27, 'John Smith', '384 Flynn Street Strongsville, OH 44136', 'Male', 'Web Developer', 25),
(28, 'Mark Boucher', '256, Olive Street, NY', 'Male', 'Techbical Assistance', 23);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `employee`
--
ALTER TABLE `employee`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `employee`
--
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=29;
Thanks!
ReplyDeleteAgur!
Josean
no funciona el sistema
ReplyDeleteGood Tutorial, easy to follow and grabs
ReplyDeletemuchas gracias por compartir el codigo
ReplyDeletei need one more dropdown in above the drop down and upper dropdown should be dependedned dropdown for the bellow one
ReplyDeletei need this type of functionality see www.readytogo.co.in
ReplyDeleteasdasdsad
ReplyDeleteThanks Alot Man!! This Helps me Alot :)
ReplyDeletethansk bro
ReplyDeleteThanks a lot guys, I really want to be like you guys someday
ReplyDeletegreat job but i have error in json :"parseerror "
ReplyDelete$.ajax({
url:"config/select.php",
type:"post",
data:({
editKey :20,
editValue:value
}),
success:function(response){
console.log(response);
}
,
error: function(xml, error) {
console.log(error);
}
});
how can i show the data after only select the dropdown?? not click on search button
ReplyDeletei can do it
Delete@Bidush Sarkar you have to pass ajax details through onchange of drop down
ReplyDeleteI have recreated your project exactly. But, my copy of your code never dips into the ajax call. If I add error handling, it just returns "no data found."
ReplyDeleteWhat am I missing?
I know it's been a while since you posted this, and I see that you don't respond.
ReplyDeleteBut, my code does not return to the HTML to make the form.
Many Thanks. sir
ReplyDeleteAs select onchange
ReplyDeletesorry is it possible to save to database once it gives me back the information? Thank you
ReplyDeletethanks
ReplyDelete