我目前正在使用 Go、Templ 和 HTMX 創建自己的部落格平台,我將自己託管該平台。我認為這將是一個有趣且有用的項目,它也將幫助我獲得有關該堆疊的知識。在這篇文章中,我將分享我在使用 HTMX 處理重新導向時遇到的挑戰的經驗和解決方案。
在完成管理員功能時,我決定是時候開始在專案中實作 HTMX 了。我從一個按鈕元素開始,它將向我的登出處理程序發送 POST 請求。通常,我會使用表單元素來完成此任務,但正如我所提到的,是時候開始在專案中實作 HTMX 了。問題是我希望這個 POST 操作仍然像表單一樣運行,並且讓伺服器的回應重定向回 / 端點。
這是我使用的按鈕元素:
<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) }
圖片:內容已交換「登出」按鈕
可以透過將回應中的 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中文網其他相關文章!