Hướng dẫn lấy và trả dữ liệu Json bằng Ajax jQuery

<?php
// Set Header content type
header("Content-type: application/json");

// Sample Array Data
$arr = ["id":1, "data": "Sample Data Only."];

// Echo Array data as JSON
echo json_encode($arr);
?>

[{
"id":1,
"name": "Mark Cooper",
"address": "23 St. Here City, Anywhere, 2306",
"contact": "09123456987"
},{
"id":2,
"name": "John Smith",
"address": "6 St. Here City, Anywhere, 2306",
"contact": "09789456123"
},{
"id":3,
"name": "Samantha Lou",
"address": "14 St. Down There City, Over There, 1415",
"contact": "09456987123"
},{
"id":4,
"name": "Cristine Lee",
"address": "15 St. Down There City, Over There, 1415",
"contact": "09321987456"
},{
"id":5,
"name": "Joshua Miller",
"address": "1234 St. XXX City, XXXXXXX, 1014",
"contact": "09456654123"
}]

<div class="container-fluid py-4 my-2">
<h1 class="text-center fw-bold text-white">Returning PHP Array as JSON in jQuery Ajax</h1>
<hr class="border-light">
<div class="card rounded-0 shadow col-lg-6 col-md-10 col-sm-12 mx-auto">
<div class="card-header">
<div class="card-title">
Sample Data
</div>
</div>
<div class="card-body">
<div class="container-fluid">
<?php
$data = json_decode(file_get_contents("data.json"));
?>
<table class="table table-bordered table-hover table-striped">
<colgroup>
<col width="10%">
<col width="60%">
<col width="30%">
</colgroup>
<thead>
<tr class="bg-primary text-light">
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($data as $row): ?>
<tr>
<td class="text-center"><?= $row->id ?></td>
<td><?= $row->name ?></td>
<td class="text-center">
<button class="btn btn-primary btn-sm rounded-0 view_details" type="button" data-id="<?= $row->id ?>">View Details</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="mt-3" id="details">
<div class="card rounded-0 shadow col-lg-4 col-md-8 col-sm-12 mx-auto">
<div class="card-header rounded-0">
<div class="card-title"><b>Details</b></div>
</div>
<div class="card body rounded-0">
<div class="container-fluid">
<dl class="row">
<dt class="col-lg-4">ID:</dt>
<dd class="col-lg-8" id="id"></dd>
</dl>
<dl class="row">
<dt class="col-lg-4">Name:</dt>
<dd class="col-lg-8" id="name"></dd>
</dl>
<dl class="row">
<dt class="col-lg-4">Contact #:</dt>
<dd class="col-lg-8" id="contact"></dd>
</dl>
<dl class="row">
<dt class="col-lg-4">Address:</dt>
<dd class="col-lg-8" id="address"></dd>
</dl>
</div>
</div>
</div>
</div>
</div>