使用 HTMX 重定向浏览器

我目前正在使用 Go、Templ 和 HTMX 创建自己的博客平台，我将自己托管该平台。我认为这将是一个有趣且有用的项目，它也将帮助我获得有关该堆栈的知识。在这篇博文中，我将分享我在使用 HTMX 处理重定向时遇到的挑战的经验和解决方案。

重定向浏览器

在完成管理员功能时，我决定是时候开始在项目中实施 HTMX 了。我从一个按钮元素开始，它将向我的注销处理程序发送 POST 请求。通常，我会使用表单元素来完成此任务，但正如我所提到的，是时候开始在项目中实现 HTMX 了。问题是我希望这个 POST 操作仍然像表单一样运行，并且让服务器的响应重定向回 / 端点。

问题：使用 http.Redirect 处理重定向

这是我使用的按钮元素：

<button hx-post="/logout" hx-trigger="click">Logout</button>

我遇到的问题是重定向的响应仍然是 HTML，并且 HTMX 将此内容交换为注销按钮元素。

使用 http.Redirect 处理重定向

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    http.Redirect(w, r, "/", http.StatusSeeOther)
}

图像：内容已与“注销”按钮交换

解决方案：使用HX-Redirect header

可以通过将响应中的 http.Redirect 替换为 HX-Redirect 标头并将目标位置作为其值来防止内容交换。

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    // Write our HX-Redirect header with location and redirect
    w.Header().Set("HX-Redirect", "/")
    http.WriteHeader(http.StatusNoContent)
}

图片：浏览器已被重定向到/记下网址。

结论

到目前为止，使用 Go、Templ 和 HTMX 构建我自己的博客平台的过程是一次有益的经历。通过集成 HTMX，该网站将仍然能够拥有现代网站的许多交互功能，而无需编写和提供额外的 JavaScript 代码。使用 HX-Redirect 标头处理重定向是一个简单而有效的解决方案。我希望这篇文章对任何人的项目有所帮助，并鼓励您探索 HTMX 在 Web 应用程序中的潜力。

以上是使用 HTMX 重定向浏览器的详细内容。更多信息请关注PHP中文网其他相关文章！