XMLHttpRequestを使用してテーブルにデータを登録したい

Question

以下HPを参考に、XMLHttpRequestを使用してテーブルにデータを登録しようとしています。

参考：https://reffect.co.jp/html/xmlhttprequest-basic

Goでエラーの表示は出ていないのですが、JavascriptをDevToolsで確認するとxmlHttpRequest.sendを通っていない様でした。
そこで止まってしまうためか、console.logも処理が通りません。

なぜここの処理を通ってくれないのでしょうか？
どなたかご教授いただけますとありがたいです。

<input type="submit" class="btn" id="btnRegist" onsubmit="regist(); return false;">

POST       /make/test                            MakeAPI.Test

function regist() {
　　　　　　try {
　　　　　　　　　　　　　　　var id = 102;
　　　　　　　　　　　　　　　var name = "name";
    
　　　　　　　　　　　　　　var query = {};
　　　　　　　　　　　　　　query["id"] = Number(id);
　　　　　　　　　　　　　　query["name"] = name; 
　　　　　　　　　　　　　　var xmlHttpRequest = new XMLHttpRequest();
　　　　　　　　　　　　　　xmlHttpRequest.open("make/test", "POST", true);
　　　　　　　　　　　　　　xmlHttpRequest.send(query);
　　　　　　　　　　　　　　console.log("送った！！！！！");
　　　　　　　}
　　　　　　　catch(ex) {
     　　　　console.log(ex);
　　　　　　　}
}

import (
reqMake "testreq/make"
resMake "testres/make"
)

type MakeAPI struct {
	API
}

func (c MakeAPI) Test() revel.Result {
	logger.Info(c.Name, c.MethodName, "Start")
	fmt.Print("エラー１")
	// レスポンスデータ設定
	var resTestRes resMake.TestRegisterRes

	// リクエストパラメータ取得
	var reqTestReq = reqMake.TestRegisterReq{}

	repoTestTable := c.repoTestTable
	fmt.Print("エラー２")
	z := entity.TestTable{
		ID:     reqTestReq.ID,
		Name:   reqTestReq.Name,
	}
	fmt.Print("エラー３")
	repoTestTable.TestInsert(&z)
	fmt.Print("登録できた筈！！！！！！！")

	return c.RenderJSON(resTestRes)
}

type TestRegisterRes struct {

	// maker id
	ID int `json:"id"`

}

package make

type TestRegisterReq struct {

	// メーカーID
	ID int `json:"id"`
	// メーカー名
	Name string `json:"name"`

}

追記
現状処理は　xmlHttpRequest.open("make/test", "POST", true);まで進み、その後catch(ex) に飛びます。

Comments

[maisumakun]

> なぜここの処理を通ってくれないのでしょうか？

regist関数は、どこからどのように呼び出していますか？

[Lhankor_Mhy]

regist はどこで呼び出していますか？

[yambejp]

httpサーバー上で実行していますか？サーバーサイドのプログラムはなんでしょうか？

[退会済みユーザー]

すみません、registについて抜けていたので追記いたしました。
DevTools上ではxmlHttpRequest.open("make/test", "POST", true);まで通り、その後catch(ex) に飛びます。

[HumenFinder]

DevToolsのNetworkの通信ログはどのようなかんじですか？

[退会済みユーザー]

サーバーサイドのプログラムはGoで記述しています。
追記いたしました。

[退会済みユーザー]

DevToolsのNetworkの通信ログ確認したらリクエスト遅れていませんでした・・・

Answer 1

preventDefault()していないので、普通にフォーム送信されてしまっているのでは。

単純にform要素にイベントをつけていないので、発火していないのではないですか？
HTMLFormElement: submit イベント - Web API | MDN

Comments

[Lhankor_Mhy]

ああ、return false してるのですね。失礼しました。

[Lhankor_Mhy]

form要素にイベントをつけてないからか……

Answer 2

Javascriptの問題ではなく、Goに以下が抜けていただけでした。

c.txnSet()

Answer 3

XMLHTTPRequest.sendに指定できる引数は種類が決まっていて、単なる{}によるオブジェクトは指定できません（MDN）。

文字列、FormData、URLSearchParamsなどを使う必要があります。

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。

貼っていただいたリンク先を元にxmlHttpRequest.send("id=102&name=name");としてみたのですが結果に変化はありませんでした。
こういうことではないのでしょうか？

[maisumakun]

xmlHttpRequest.open("make/test" としていますが、その相対パスで間違いはないですか？

[Lhankor_Mhy]

そもそも、XMLHttpRequest.open(method, url ... なので動くはずがないような。
質問の JavaScript は実際のコードとはかなり違うのではないかな、と感じています。