Ajax - PHP - Cách nạp dữ liệu từ bảng html
Cách nạp dữ liệu từ bảng html mà không làm mới toàn bộ trang
Bằng cách sử dụng ajax, chúng ta có thể tìm nạp dữ liệu động từ cơ sở dữ liệu hoặc dữ liệu bảng.
Trong ví dụ dưới đây, chúng ta tìm nạp dữ liệu bảng một cách động
backend/get_table.php
<?php
$contents = '<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
<tr>
<td>Tum</td>
<td>Deo</td>
</tr>
</tbody>
</table>';
echo json_encode($contents);
?>
index.html
<!DOCTYPE html>
<html>
<title>Ajax Without Refresh</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<button class="refresher">Refresh table</button>
<table id="table-to-refresh">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Deo</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click', '.refresher', function () {
$.ajax({
url: 'backend/get_table.php',
method: "GET",
dataType: 'json',
success: function(response) {
$('#table-to-refresh').html(response);
}
});
});
});
</script>
</body>
</html>