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>

Xem ví dụ