Ajaxとコントローラー

概要

Spring開発にて、Ajaxを用いた非同期通信について記載していく

画面更新(リロード)しない非同期通信を行う場合

準備と処理内容

• index.html(例は省略)
  
  • class=Btの要素をクリックで「AAA」を非同期通信でDBに登録したい
• Ajax.js
  • 非同期処理
• likeController.java -非同期処理の実態
• Entity(省略)

※Bt.htmlより抜粋

Bt.html

    <div class="modal-bookmark">
        <p class=modal-bookmark-text>いいね!</p>
        <img src="/images/hogehoge.svg" class="Bt">
        <input type="hidden" th:value="AAA">
    </div>

Ajax.js

$(document).ready(function () {
    /* 「class=Bt」のものがクリックされた時に実行 */
    $('.Bt').click(function (e) {
        /* 
        * htmlのデータ取得
        * Btクラスの次の行に記載されているデータを指定
        * 例では「AAA」
        */
        var target = e.target.nextElementSibling.value;
        $.ajax({
            /* Post通信 */
            type: "POST",
            /* likeController.javaの@PostMapping(/like)の箇所へ */
            url: "/like",
            /* 
            * 取得した値（th:value='AAA'）をXXXに格納 
            * XXXはentityの中のメンバ変数
            */
            data: { "XXX": target }
        })
            .done(function () {
                /* 上記Ajaxの処理が成功した場合に、処理される */
            })
            .fail(function () {
                /* 上記Ajaxの処理が失敗した場合に、処理される */
                alert('error');
            });
    });
})

likeController.java

@RestController
public class LikeController {
    @PostMapping("/like")
    public void like(@ModelAttribute Entity fugafuga) {
        /* 
        *   Ajaxより非同期で行いたい処理を記載する
        *   例でいうと、DBに登録するための処理を記載する
        */
        }
    }
}

まとめ

　Ajaxを用いることで、java側のコントローラーへ値の受け渡しを行うことができ、画面遷移を行わずにデータのやり取りを行うことができる。(非同期通信)