Go - フォームから送信されたJSONを受け取った後に指定のページに遷移したい。

Question

はじめに

質問を読んでくださりありがとうございます。
Go言語でCRUDアクションのWeb Applicationを作っています。
ブラウザのフォームからJSONで送信してバックエンドのGOで受け取り構造体にマッピングした処理をした後、別ページへ遷移させたいのですが、うまくいきません。

エラー内容

http.Redirectを使ってページを指定のページへ遷移させようとしていますが、URL変わらず同じページがリダイレクトされるだけです。エラーハンドリングは出来ていません。

期待する処理

POSTしたあとに自動的に指定するURLへ遷移してほしいです。

コード

type Sample struct {
	Name string
	Age  int
}

func Create(w http.ResponseWriter, r *http.Request) {
	// init
	var f Sample
	// json to struct
	err := json.NewDecoder(r.Body).Decode(&f)
	if err != nil {
		log.Fatalln(err)
	}
	fmt.Println(f)
	http.Redirect(w, r, "http://localhost:8080/sample/", 301)
}

func main() {
	mux := http.NewServeMux()
    // 下記で js, css を読み込ませる。
	files := http.FileServer(http.Dir("assets"))
	mux.Handle("/static/", http.StripPrefix("/static/", files))

    // このURLへ遷移させたい。
	mux.HandleFunc("/sample/", Show)
    // Formはここから送信されます。
	mux.HandleFunc("/sample/new", New)
    // JSでバックエンドでこのURLのリクエストしています。
	mux.HandleFunc("/sample/create", Create)
	server := http.Server{
		Addr:    fmt.Sprintf("127.0.0.1:%v", config.Config.Port),
		Handler: mux,
	}
	err := server.ListenAndServe()
	if err != nil {
		log.Fatalln(err)
	}
}

フォームをJSで送信しています。
/sample/new/のページからJSで/sample/create/のリクエストを送ります。
Createの処理が最後まで行けば指定のページ先へ遷移するはずがしません。
リダイレクトの処理以外はうまく行われています。

$(function () {
    function FormSend (e) {
        e.preventDefault();
        $("#Form").on('submit', function () {
            $("#Form").attr("disable", true);
            let data = {
                name: $("#Name").val(),
                age: $("#Age").val()
            };
            $.ajax({
                method: 'post',
                url: '/sample/create',
                data:JSON.stringify(data),
                dataType: 'json',
                contentType: "application/json",
                timeout: 10000,
            })
            .done((data) => {
                console.log(data);
            })
            .fail((error) => {
                console.error(error);
            })
            .always(() => {
                $("#Form").attr("disable", false);
            });
        });
    }
    FormSend();
    return false
});

お願いしたいこと

エラーハンドリングが出来ていないためになぜページ遷移しないか原因がよくわかっていません。なので、WebAppｄがブラウザのフォームからJSON POSTを受け取った後に指定のページへ遷移する方法を教えていただきたいです。

よろしくお願い致します。

Answer 1

現状jQueryを使って非同期通信しているのでページ遷移できないのかと。
Goで遷移したいのなら $.ajax は使わず <form> のPOSTをする必要があると思います。

Comments

[退会済みユーザー]

サーバーサイド側でリダイレクトする必要がないのならjQueryで遷移させてしまう手もあるかと。 https://uxmilk.jp/41457

Answer 2

上の方も仰っている通りフロント側で遷移させるのが良いかと思います。
フォームデータの送信が終了した時の処理に遷移処理を書けば送信後に遷移できると思います。

$(function () {
    function FormSend (e) {
        e.preventDefault();
        $("#Form").on('submit', function () {
            $("#Form").attr("disable", true);
            let data = {
                name: $("#Name").val(),
                age: $("#Age").val()
            };
            $.ajax({
                method: 'post',
                url: '/sample/create',
                data:JSON.stringify(data),
                dataType: 'json',
                contentType: "application/json",
                timeout: 10000,
            })
            .done((data) => {
                console.log(data);
                // ここに遷移するためのコード
            })
            .fail((error) => {
                console.error(error);
            })
            .always(() => {
                $("#Form").attr("disable", false);
            });
        });
    }
    FormSend();
    return false
});