(5) Ajaxで実行するWeb APIを作成 [jQuery]
はじめに
今回はAjaxによる画面の表示内容を変更する動的ページを作成します。
今回作成する内容
概要
前回の画面からボタンを追加し、Ajax(非同期通信)で計算を実行します。
前回作成した通常の画面表示と処理的には何も変わらない。
唯一違うのは画面がちらつかなくなるという些細な(!?)ところ。
画面
※ Ajaxとは
非同期に通信して、(画面の再表示を行うことなく)ページの内容を書き換える技術です。
作成手順
- 計算画面(calc.html)にAjaxで計算処理を行うボタンを追加
- 値を受け取り計算結果を返すWebAPIを作成
1. 計算画面(calc.html)にAjaxで計算処理を行うボタンを追加
ポイント
calc.html
<!DOCTYPE html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>calc</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(function() { /* 計算(Ajax)ボタンクリック */ $("#calcAjax").click(function(){ console.log("Ajax実行"); $.ajax({ url: "/calc2", type: "POST", data: { val1: form.val1.value, val2: form.val2.value }, dataType: "text", success: function(data){ console.log("成功、値:" + data); $("#ans").text(data); } }); }); }); </script> </head> <body> <h3>WEBプログラミング入門 計算ページ</h3> <form th:action="@{/calc}" method="POST" th:object="${form}" name="form"> <input type="text" th:field="*{val1}" /> + <input type="text" th:field="*{val2}" /> = <span th:text="${ans}" id="ans"></span> <br/><br/> <input type="submit" value="計算" /> </form> <br /> <button id="calcAjax">計算(Ajax)</button> </body> </html>
2. 値を受け取り計算結果を返すWEB APIを作成
ポイント
- 前回で作成した足し算の処理をWEB API側でも使うので共通のロジック化
- 計算処理 WebAPI を追加
AppController.java
package com.sbc.web; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.sbc.web.form.CalcForm; @Controller public class AppController { @RequestMapping("/") public String index(){ return "index"; } @RequestMapping("/second") public String second(){ return "second"; } @RequestMapping("/calc") public String calc(@ModelAttribute CalcForm form, Model model){ // 値1と値2を足した結果を算出する String ans = calcLogic(form); // 画面表示項目設定 model.addAttribute("form", form); model.addAttribute("ans", ans); // calc画面を表示 return "calc"; } // ↓↓↓ 処理を追加 ↓↓↓ @RequestMapping("/calc2") @ResponseBody public String calc2(@ModelAttribute CalcForm form){ // 値1と値2を足した結果を返却する return calcLogic(form); } // ↑↑↑ 処理を追加 ↑↑↑ /** * 値1と値2を足した結果を算出する * * @param form 計算フォーム * @return 足し算の結果 */ private String calcLogic(CalcForm form){ String ans = null; try{ // 入力された値1・値2を数値に変換 int val1 = convertToNumber(form.getVal1()); int val2 = convertToNumber(form.getVal2()); // 計算(足し算) int result = val1 + val2; // 結果を文字列に変換 ans = String.valueOf(result); } catch(Exception e){ ans = "入力された値が正しくありません。整数を入力してください"; } return ans; } /** * 文字列を数値に変換する * * @param val 文字列 * @return 数値 */ private int convertToNumber(String val){ // 値が空の場合はゼロを返却 if(StringUtils.isEmpty(val)){ return 0; } // 数値に変換した値を返却 return Integer.parseInt(val); } }
動作確認
値1と値2を入力し「計算(Ajax)」ボタンをクリックすると計算結果が動的に表示されます。
おわりに
今回で画面やWebAPIの作成が出来るようになったので、様々なWEBページの作成が可能になります。
次回はさらに幅広いWEBページの作成を可能にするDBを使用した処理について記載していきます。