使用HTMX动态更新href属性时分页请求URL异常的问题

你遇到的问题核心是<main>上的hx-boost="true"——HTMX在启用boost功能时，会在页面初始化阶段缓存所有链接的初始href值，后续点击时会直接使用这个缓存值，而非你通过JS动态更新的href属性，所以哪怕你改了href，请求还是会走初始的/?page=2。

方案1：移除hx-boost="true"（最简便） #

你的场景是局部加载商品列表，不需要用hx-boost（该功能主要用于增强整页导航体验），直接移除后HTMX会正常读取你更新后的href：

<main>
    <section id="products-container-id">
        {{foreach $product = $products}}
            {{render "components/CardProduct" $product}}
        {{end}}
    </section>

    <a href="/products?page=2" id="more-products-btn-id" hx-target="#products-container-id" hx-swap="beforeend">
        More products</a>

    <script defer>
        (() => {
            let productBtn = document.querySelector("#more-products-btn-id")

            productBtn.addEventListener("htmx:afterSettle", (e) => {
                let currentPage = Number(new URLSearchParams(productBtn.href).get("page"))
                if (!isNaN(currentPage))
                    // 补全完整URL路径，避免相对路径问题
                    productBtn.setAttribute("href", "/products?page=" + (currentPage + 1))
            })
        })()
    </script>
</main>

方案2：保留hx-boost，改用动态参数传递 #

如果必须保留hx-boost，可以通过hx-vars动态传递页码，而非修改href，HTMX会直接读取hx-vars的最新值：

<main hx-boost="true">
    <section id="products-container-id">
        {{foreach $product = $products}}
            {{render "components/CardProduct" $product}}
        {{end}}
    </section>

    <a href="/products" id="more-products-btn-id" 
       hx-get="/products" hx-vars='{"page": 2}'
       hx-target="#products-container-id" hx-swap="beforeend">
        More products</a>

    <script defer>
        (() => {
            let productBtn = document.querySelector("#more-products-btn-id")

            productBtn.addEventListener("htmx:afterSettle", (e) => {
                let currentVars = JSON.parse(productBtn.getAttribute("hx-vars"))
                currentVars.page += 1
                productBtn.setAttribute("hx-vars", JSON.stringify(currentVars))
            })
        })()
    </script>
</main>

方案3：使用htmx:configRequest动态修改请求参数 #

另一种方式是监听htmx:configRequest事件，在请求发送前动态设置页码参数，彻底绕开缓存问题：

<main hx-boost="true">
    <section id="products-container-id">
        {{foreach $product = $products}}
            {{render "components/CardProduct" $product}}
        {{end}}
    </section>

    <a href="/products?page=2" id="more-products-btn-id" 
       hx-target="#products-container-id" hx-swap="beforeend">
        More products</a>

    <script defer>
        (() => {
            let productBtn = document.querySelector("#more-products-btn-id")
            let currentPage = 2

            // 请求发送前修改参数
            productBtn.addEventListener("htmx:configRequest", (e) => {
                e.detail.parameters.page = currentPage
            })

            // 请求完成后更新页码
            productBtn.addEventListener("htmx:afterSettle", (e) => {
                currentPage += 1
            })
        })()
    </script>
</main>

内容的提问来源于stack exchange，提问作者otaxhu