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 ヘッダーを使用する

コンテンツの交換は、応答内の 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)
}

画像: ブラウザがリダイレクトされました / URL に注意してください。

結論

Go、Templ、および HTMX を使用して独自のブログ プラットフォームを構築するプロセスは、これまでのところやりがいのある経験です。 HTMX を統合することにより、最新の Web サイトであれば、追加の JavaScript コードを作成して提供することなく、多くの対話機能をサイトに引き続き搭載できます。 HX-Redirect ヘッダーを使用してリダイレクトを処理することは、シンプルで効果的なソリューションでした。この投稿がプロジェクトを進めるすべての人に役立ち、Web アプリケーションで HTMX の可能性を探求するきっかけになれば幸いです。

以上がHTMXを使用したブラウザのリダイレクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。