Cập nhật Url khi lọc sản phẩm bằng Javascript

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.

Đề xuất cho bạn

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments

Tặng Ebook chia sẻ kinh nghiệm học lập trình web đi làm cho người mới bắt đầu!

Đây là tấm bản đồ chia sẻ lại cách học lập trình web đi làm đã giúp nhiều học trò của unitop kiếm được thu nhập từ 8-30tr mỗi tháng.

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x