使用 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中文網其他相關文章！