Khi thực hiện chức năng lọc sản phẩm theo danh mục, thương hiệu, nhà sản xuất…Làm thế nào để sau khi lọc xong reload lại trình duyệt tham số điều kiện lọc lưu lại trên url để hiển thị dữ liệu như điều kiện đã lọc ngay bước trước đó?
Nếu trên là điều bạn quan tâm, trong bài viết này tôi chia sẻ bạn đoạn code để thực hiện điều này.
Hướng dẫn cập nhập url sau khi lọc bằng javasciprt
Bạn hãy tưởng tượng chúng ta có 3 thương hiệu apple, samsung, oppo. Nhiệm vụ đặt ra là khi check vào từng thương hiệu thì ngay lập tức update tên thương hiệu được lọc lên url mà không cần load trang.
Đây là một bước quan trọng trong quá trình thực thi chức năng lọc dữ liệu trên website bằng AJAX.
Trong đoạn code bên dưới tôi chia sẻ bạn những dòng code quan trọng để làm được điều đó một cách dễ dàng.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filter Product - Unitop.vn</title>
</head>
<body>
<input
type="checkbox"
name="brand"
value="apple"
onClick="filterByBrand()"
/>Apple
<input
type="checkbox"
name="brand"
value="samsung"
onClick="filterByBrand()"
/>Samsung
<input
type="checkbox"
name="brand"
value="oppo"
onClick="filterByBrand()"
/>Oppo
<script>
function filterByBrand() {
let brands = [];
let brandCheckboxes = document.getElementsByName("brand");
// Duyệt qua từng checkbox đề lấy những thương hiệu đã được chọn
for (let i = 0; i < brandCheckboxes.length; i++) {
if (brandCheckboxes[i].checked) {
brands.push(brandCheckboxes[i].value);
}
}
console.log(brands);
// Nối các thương hiệu được chọn với nhau bằng dấu phẩy ','
let brandString = brands.join(",");
// Cập nhật Url với các thương hiệu đã checked
let queryParams = new URLSearchParams(window.location.search);
queryParams.set("filter", brandString);
window.history.replaceState(null, null, "?" + queryParams.toString());
// Bạn có thể sử dụng AJAX để lấy danh sách sản phẩm tương ứng với thương hiệu đã được chọn ở đây
// và cập nhật HTML và hiển thị danh sách sản phẩm đã lọc được.
}
</script>
</body>
</html>
Tổng kết:
Trong bài viết này tôi chia sẻ bạn đoạn chương trình giúp cập nhật tham số trong quá trình lọc dữ liệu lên url bằng javascript. Chúc bạn sử dụng nó hiệu quả trong quá trình xây dựng dự án của mình.
Khám phá thêm lộ trình 10 bước học web đi làm nếu muốn phát triển sự nghiệp theo nghề lập trình web kiếm tiền từ kỹ năng có được trong vài tháng tới.
