【Spring Boot】POSTリクエストパラメータの値を画面に表示する方法

この記事では、フォームの値をPOSTで送信したら画面遷移をしてその値を表示する仕組みを解説します。

プロジェクトの作成
用意するソース
実行結果
解説
図解

目次へ

プロジェクトの作成

VSCodeでSpringBootのMavenプロジェクトを作成します。
手順は以下の記事を参照。

2021年11月28日【Windows版】VSCodeで始めるSpringBoot(Mavenプロジェクト編)

用意するソース

SpringBootで新規プロジェクトを作成したら、以下のソースを用意して実行できる状態にします。

コントローラー`(BaseController.java)`

BaseController.java

package com.example.demo3;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class BaseController{

    @GetMapping("/")
    public String home() {
      return "form";
    }

    @PostMapping("/result")
    public String result(@RequestParam String msg1,
                          @RequestParam String msg2,
                          @RequestParam String msg3, Model model){
        model.addAttribute("message1",msg1);
        model.addAttribute("message2",msg2);
        model.addAttribute("message3",msg3);
        return "result";
    }
}

MEMO

@PostMapping("/result")は、http://localhost/resultにPOSTリクエストがあった場合に実行されます。

遷移元ページ`(form.html)`

form.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>form</title>
<script type="text/javascript"></script>
</head>
<body>
<form th:action="@{/result}" method="post">
    <label>
        メッセージ1：<input type="text" name="msg1"><br>
    </label>
    <label>
        メッセージ2：<input type="text" name="msg2"><br>
    </label>
    <label>
        メッセージ3：<input type="text" name="msg3"><br>
    </label>
    <button>送信</button>
</form>
</body>
</html>

以下のコードはフォームが送信された場合、/resultへPOSTリクエストを送信することを意味します。

HTML

<form th:action="@{/result}" method="post">

遷移先ページ`(result.html)`

result.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>result</title>
<script type="text/javascript"></script>
</head>
<body>
<p>メッセージ1：<span th:text="${message1}"></span></p>
<p>メッセージ2：<span th:text="${message2}"></span></p>
<p>メッセージ3：<span th:text="${message3}"></span></p>
</body>
</html>

実行結果

上記のソースを実行してブラウザでhttp://localhost:8080/にアクセスすると以下の画面が表示されます。これは遷移元ページ(form.html)が表示されています。
遷移元ページ(form.html)にはinput要素が3つ表示されているので、それぞれ異なる文字列を入力してみます。

入力後、「送信」ボタンを押します。
遷移先ページ(result.html)に遷移して値が表示されていることを確認できました。

解説

STEP.1

アクセス時

ブラウザでhttp://localhost:8080/にアクセスすると、遷移元ページ(form.html)が表示されます。

この遷移元ページ(form.html)にはinput要素を3つ定義してあり、ソース上ではinput要素のname属性の値をmsg1、msg2、msg3としています。

form.html

```html
    <label>
        メッセージ1：<input type="text" name="msg1"><br>
    </label>
    <label>
        メッセージ2：<input type="text" name="msg2"><br>
    </label>
    <label>
        メッセージ3：<input type="text" name="msg3"><br>
    </label>
```

STEP.2

入力/送信時

3つのinput要素に値を入力して「送信」ボタンを押すと、input要素に定義されたmsg1、msg2、msg3がBaseController.javaの@RequestParam で定義したmsg1、msg2、msg3にマッピングされます。

BaseController.java

@PostMapping("/result")
public String result(@RequestParam String msg1,
                      @RequestParam String msg2,
                      @RequestParam String msg3, Model model){
    model.addAttribute("message1",msg1);
    model.addAttribute("message2",msg2);
    model.addAttribute("message3",msg3);
    return "result";

そして、Model部の処理は、1つ目のinput要素(name属性の値がmsg1)の値をmessage1へ出力、
21つ目のinput要素(name属性の値がmsg2)の値をmessage2へ出力、
3つ目のinput要素(name属性の値がmsg3)の値をmessage3へ出力、
と解釈することができます。

STEP.3

ページ遷移時

「送信」ボタンを押すと遷移先ページ(result.html)が表示されます。このとき、BaseController.javaのモデル部で定義したmessage1、message2、message3と遷移先ページ(result.html)のmessage1、message2、message3がマッピングされるため、input要素の値を表示できるというわけです。

result.html

```html
<p>メッセージ1：<span th:text="${message1}"></span></p>
<p>メッセージ2：<span th:text="${message2}"></span></p>
<p>メッセージ3：<span th:text="${message3}"></span></p>
```