<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="w3.css">
<title>Document</title>
</head>
<body>
<table class="w3-table-all">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td id="id"></td>
<td id="name"></td>
<td id="email"></td>
</tr>
</tbody>
</table>
<button type="submit" class ="w3-button w3-blue" name="submit" id="getdata">Get Info </button>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#getdata").click(function (){
$.ajax({
url:"process.php",
type: "POST",
data:{"olee":"olee"},
success:function (data){
var obj = JSON.parse(data);
$("#id").text(obj.id);
$("#name").text(obj.name);
$("#email").text(obj.email);
}
});
});
});
</script>
</body>
</html>
<?php
$student = array("id" => 1,"name" => "olee ahmmed","email" => "olee@gmail.com");
echo json_encode($student);
?>
multiple array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="w3.css">
<title>Document</title>
</head>
<body>
<table class="w3-table-all">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td id="id"></td>
<td id="name"></td>
<td id="email"></td>
</tr>
</tbody>
</table>
<button type="submit" class ="w3-button w3-blue" name="submit" id="getdata">Get Info </button>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#getdata").click(function (){
$.ajax({
url:"process.php",
type: "POST",
data:{"olee":"olee"},
success:function (data){
var obj = JSON.parse(data);
alert(obj[0].name);
}
});
});
});
</script>
</body>
</html>
process.php
<?php
$student = array(array("name" => array("gsm","olee"),"email" => "olee@gmail.com"));
echo json_encode($student);
?>
OLEETECH 