在 JavaScript 中实现基于 AJAX 的过滤器，而无需页面重新加载/刷新

问：

如果我可以选择你的大脑？

我正在从事一个 Web 开发项目，我需要实现过滤器按钮，这些按钮可以在不重新加载页面的情况下更新页面内容。我编写了一个 JavaScript 函数，可以成功创建过滤器按钮并将其添加到我的页面。但是，目前，当单击这些按钮时，它们会将用户重定向到新的 URL，从而导致页面重新加载。我想对此进行修改，以便内容在不刷新页面的情况下动态更新。

下面是当前的代码片段：

(function() {
  'use strict';

  function createFilterButton(id, text, filterUrl) {
    let button = document.createElement('button');
    button.id = id;
    button.textContent = text;
    button.style.cssText = `
      background-color: black;
      color: white;
      text-transform: uppercase;
      padding: 10px 20px;
      margin-top: 10px;
      margin-right: 10px;
      margin-bottom: 15px;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      font-size: 17px;
    `;
    button.addEventListener('click', function() {
      window.location.href = filterUrl;
    });
    return button;
  }

  if (window.location.pathname.includes('/collections/new-arrivals')) {
    const collectionTitle = document.querySelector('.collection__title');
    if(collectionTitle) {
        
          // Add the 'DENIM' button
      collectionTitle.insertAdjacentElement('afterend', createFilterButton('denimFilter', 'DENIM', '/collections/new-arrivals/latest-denim'));
        
           // Add the 'FAUX LEATHER' button
      collectionTitle.insertAdjacentElement('afterend', createFilterButton('fauxFilter', 'FAUX LEATHER', '/collections/new-arrivals/latest-faux-leather'));
        
      // Add the 'ALL' button
      collectionTitle.insertAdjacentElement('afterend', createFilterButton('allFilter', 'ALL', '/collections/new-arrivals'));
    
    }
  }
})();

我一直在探索和测试 pushState 和 replaceState 方法的使用，作为我动态更新网页内容而不重新加载整个页面的努力的一部分。除此之外，我还在研究Alpine.js是否可以成为满足我需求的可行解决方案。我的目标是操纵浏览器的历史记录，更改地址栏中的 URL 以反映应用的过滤器，并获取和显示新内容。

以下是我到目前为止所做的：

1.） 研究 pushState 和 replaceState 方法

2.） 历史操作实验：我试图将这些方法集成到我现有的 JavaScript 代码中。具体来说，将我的按钮单击事件侦听器中的 window.location.href 赋值替换为对 history.pushState 或 history.replaceState 的调用。

3.） 探索Alpine.js：同时，我正在研究使用Alpine.js的潜力。我相信它的轻量级性质和声明式风格可能会提供一种更简单、更有效的方式来处理动态内容更新。

4.） 预期结果：我的期望是，在单击过滤器按钮后，URL 会发生变化以反映所选过滤器，模仿页面导航。同时，将动态获取和显示相关的过滤内容。

但是，我遇到了挑战。虽然 URL 按预期更新，但在不刷新页面的情况下获取和显示新内容一直存在问题。我目前正在研究Alpine.js如何在这方面提供帮助，特别是在使用新内容无缝更新DOM方面。

我将非常感谢任何见解、建议或建议，尤其是那些在类似上下文中集成历史 API 方法和 Alpine.js 经验的人。

多谢。