【jQuery】Ajaxでformの値をPOST/GET通信する

　jQuery でフォームの値を ajax でPOST/GETするのはWeb開発によく使われます。画面の一部のみ更新したい際、パフォーマンス向上するための手段となり、ぜひ覚えていきましょう。
　以下サンプルはSpringを利用すると想定します。

Ajaxでformの値をPOSTする

js側の処理
ここの$.postは$.ajaxの略記です。$.ajaxの中に「type:POST」を指定すると同じです。

//フォームの中身
let form = {
    csrfToken : $("input[name='csrfToken']").val(),
    userNo : $("#userNo").val(),
    userName : $("#usageList").val(),
};

// 入力内容をAjaxで送信してチェックします
// $.postは$.ajaxの略記です
$.post({
    url: action,
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(form),    //フォームの中身は実際はJSONです！
    async: false,
}).done(function(result, status, jqXHR) {
    //ここはレスポンス受信後の処理を書きます
}).fail(function(jqXHR, status, error) {
    //失敗する際の処理を書きます
});

Formの中身
javascriptのajax送信のdataとマッピングされます。

@Data
public class SampleRequestForm {
    private String csrfToken;
    private Integer userNo;
    private String userName;
}

Controller側リクエストを取得する処理
　ここの@RequestBodyはPOSTされたデータの取扱説明書のようで、@RequestBodyを付けることで、POSTされたデータをjson形式で受け取る。リクエストを処理するメソッドの引数に、@RequestBodyは一つしか入れないが、@RequestParamは複数あっても問題がありません。

@RequestMapping(value = "/regist", method = RequestMethod.POST)
@ResponseBody
public SampleResponseForm save(@RequestBody SampleRequestForm requestForm) {
    //POSTされたデータをSampleRequestFormにマッピングされます。
}

AjaxでGET通信する

js側の処理
　resultには一般的にController処理に指定されたModelAndView（htmlファイル）が戻ります。受け取って、画面に設定する必要があります。

$.ajax({
    type: "GET",
    url: action
}).done(function(result, status, jqXHR) {
    //resultにhtmlファイルの中身が戻すのは多い
    $("#XXXX").html(result);
}).fail(function(jqXHR, status, error) {
    //失敗する際の処理を書きます
});