Hôm nay đụng độ với 1 task mà yêu cầu phải làm mới lại dữ liệu sau khi đã cập nhật. Lúc đầu cách đơn giản nhất là mình đã dùng lện location.reload() để tải lại trang web. Tuy nhiên khách hàng xem xong nói cách này không hay họ muốn quá trình dữ liệu tải lại phải mượt mà và không cần phải tải lại trang.
Nền tảng hệ thống mình đang làm việc nói chung là gò bó hạn chế nhiều vấn đề nên trước khi mình sử dụng hàm gọi API của chính hệ thống để gọi lại dữ liệu. Tuy nhiên cách này yêu cầu mình phải tỉ mỉ trong từng dòng mã HTML để xuất lại cho đúng từng thành phần nên rất khó chịu, nhất là đang là ngày nghỉ nên mình không muốn tốn thời gian nhiều cho công việc. Và trong đầu chợt nghĩ ra giải pháp sẽ dùng 1 hàm gì đó gọi lại chính trang web này dưới dạng mã HTML bình thường rồi chỉ việc lấy đoạn mã cần lấy thay cho đoạn mã hiện tại là được. Và với jQuery thì bạn hoàn toàn có thể làm được điều đó.
1 2 3 4 5 6 7 8 9 10 11 | function page_reload(){ $.ajax({ type: 'GET', url: '/page', success: function(data) { var filteredData = $(data).find(".content").children(); $(".content").html(filteredData); }, dataType: "html" }); } |
Giải thích ý nghĩa hàm ở trên như sau. Hàm sẽ tải trang web có đỉa chị url là: /page dưới dạng ajax. Sau khi lấy xong thì ta sẽ có dữ liệu HTML của trang web này và được gán tên là data. Và ta sẽ dùng các hàm tương ứng để xử lý bóc tách dữ liệu và ta sẽ có được thành phần cần lấy có tên là filteredData. Và ta có thể sử dụng filteredData làm bất cứ nhu cầu gì.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
