ゼロからはじめるWEBプログラミング入門

未経験者でも初心者でも関係なく、とにかくWEBサイトを作るところから始めるブログ!

(5) Ajaxで実行するWeb APIを作成 [jQuery]

f:id:sbc-web:20170218124715j:plain


はじめに

今回はAjaxによる画面の表示内容を変更する動的ページを作成します。

今回作成する内容

概要

前回の画面からボタンを追加し、Ajax(非同期通信)で計算を実行します。

前回作成した通常の画面表示と処理的には何も変わらない。
唯一違うのは画面がちらつかなくなるという些細な(!?)ところ。

画面

f:id:sbc-web:20170218110322p:plain

Ajaxとは

非同期に通信して、(画面の再表示を行うことなく)ページの内容を書き換える技術です。


作成手順

  1. 計算画面(calc.html)にAjaxで計算処理を行うボタンを追加
  2. 値を受け取り計算結果を返すWebAPIを作成

1. 計算画面(calc.html)にAjaxで計算処理を行うボタンを追加

ポイント
  • jQueryを使用するのでgooglejQuery CDN を定義
  • 計算(Ajax)ボタンのクリック時にで計算処理WebAPIを実行
  • WebAPIの結果を動的に画面に表示する

f:id:sbc-web:20170218103456p:plain

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 を追加

f:id:sbc-web:20170218105202p:plain

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)」ボタンをクリックすると計算結果が動的に表示されます。

f:id:sbc-web:20170218133028p:plain


おわりに

今回で画面やWebAPIの作成が出来るようになったので、様々なWEBページの作成が可能になります。

次回はさらに幅広いWEBページの作成を可能にするDBを使用した処理について記載していきます。