首頁 > 後端開發 > Golang > 主體

使用 HTMX 重定向瀏覽器

PHPz
發布: 2024-08-05 20:33:22
原創
527 人瀏覽過

我目前正在使用 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)
}
登入後複製

圖片:內容已交換「登出」按鈕
The content has been swapped with the Logout button

解決方案:使用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)
}
登入後複製

圖片:瀏覽器已被重新導向到/記下網址。

Redirecting the browser using HTMX

結論

到目前為止,使用 Go、Templ 和 HTMX 建立我自己的部落格平台的過程是一次有益的經驗。透過整合 HTMX,該網站將仍然能夠擁有許多現代網站的互動功能,而無需編寫和提供額外的 JavaScript 程式碼。使用 HX-Redirect 標頭處理重定向是一個簡單而有效的解決方案。我希望這篇文章對任何人的專案有所幫助,並鼓勵您探索 HTMX 在 Web 應用程式中的潛力。

以上是使用 HTMX 重定向瀏覽器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板