次回は、JavaからJSONを受け取りHTMLで表示を行いました。今回は、クライアントの入力情報をJSON形式でJava側へ送り、DBに値を登録する。を実装していきます。
前回の記事はこちら↓
index.htmlに追記
index.htmlに下記入力フォーマットのコードを追記します。パラメータ受け渡しの時にはformを多用しておりましたが、formは使用しておりません。POST通信の設定や値の受け渡しにかかわる処理はJSで書いていきます。
<h1>入力データをJSON送信します</h1> <p> ユーザー名：<input type="text" id="userName" name="userName"> </p> <p> パスワード：<input type="password" id="password" name="password"> </p> <p> 有効フラグ：<select name="enabled" id="enabled"> <option value="true">true</option> <option value="false">false</option> </select> </p> <p> 管理者権限：<select name="admin" id="admin"> <option value="true">true</option> <option value="false">false</option> </select> </p> <p> <button id="button" type="button">登録</button> </p>
JSON送信用のJSを追記
面倒くさいので、そのままHTMLの中に書き込んじゃいます。JSON内容確認のためにalertで一枚かましています。
<script>
$(function(){
$("#button").click(function(){
var JSONdata = {
userName:$("#userName").val(),
password:$("#password").val(),
enabled:$("#enabled").val(),
admin:$("#admin").val()
};
alert(JSON.stringify(JSONdata));
$.ajax({
type:'POST',
url:'insert',
data:JSON.stringify(JSONdata),
contentType:'application/JSON',
dataType:'json',
acriptCharset:'utf-8'
});
})
})
</script>
JSON.stringify()でJSONに変換することができます。引数の中には、JSON化したいオブジェクトを入れます。※今回でいうとJSONdataの部分。
ControllerにinsertJSONを受け取るためのメソッド追加
java Controllerで、insert用JSONを受け取るためのメソッドを追記します。
本来であれば、パスワードをBCrypt等でハッシュ化しなければなりませんが、割愛します。
@RequestMapping(value="/insert",method=RequestMethod.POST,consumes=MediaType.APPLICATION_JSON_VALUE)
public String insert(@RequestBody AccountEntity accountEntity) {
repository.save(accountEntity);
return "redirect:/index";
}
@RequestMapping(consumes=MediaType.APPLICATION_JSON_VALUE)は、JSON形式のリクエストを受け取ります宣言です。
メソッド引数の@RequestBodyも同じく、JSON形式のリクエストを受け取るためのアノテーションとなります。
ちなみに、 @RequestBody を引数に入れていれば consumes=MediaType.APPLICATION_JSON_VALUE を入れなくても読み込みは行えました。
index.htmlをリダイレクトすると、新規登録した内容が一覧tableに表示されます。
今回は、GETとPOSTのHTTPメソッドしか使用しておりませんが、PUTやDELETEなども試してみたいと思います。
