SpringBoot フォームの値を別画面に渡す

Spring Bootでフォームの値をsubmitで別画面に渡すサンプルです。
(確認環境:Spring Boot 2.5,JDK 11,thymeleaf3)

目次

サンプル 画面表示までの流れ / pom.xml
  値を送信する側のファイル(index.html)
  コントローラのクラス(MainController.java)
  値を受け取る側のファイル(testform.html)
  実行して確認する

画面表示までの流れ

画面表示の流れは、以下のとおりです。

1.ブラウザからコントローラ(MainController.java)にアクセスする。

2.コントローラがビュー1(index.html)を返す。

3.ビュー1で値を入力しコントローラにアクセスする。

4.コントローラがビュー2(testform.html)を返す。

コントローラは、アクセスするURLに従ってファイルを返します。

作成するファイル

templatesフォルダの下にtest1フォルダを作成しその中にhtmlファイルを配置します。
test1フォルダ配下に指定のhtmlファイルがない場合は以下のエラーが出ます。

org.thymeleaf.exceptions.TemplateInputException: Error resolving template [test1/index], template might not exist or might not be accessible by any of the configured Template Resolvers

※テンプレートエンジンでThymeleaf(タイムリーフ)を使用しているためthymeleafの文字があります。

githubにコードがあります。
https://github.com/ut23405/springboot/tree/master/springboot-form-submit

pom.xml

必要なライブラリです。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

pom.xmlにthymeleafの依存性の記述がないと画面表示時に以下のWhitelabel Error Pageのエラーがでます。

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

 

値を送信する側のファイル(index.html)

値を送信する側のファイルです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>submit</title>
  </head>
  <body>
    <form method="get" th:action="@{/testform}">
      <input type="text" name="text1" />
      <input type="submit" value="送信ボタン" />
    </form>
  </body>
</html>

8行目は、methodでget方式を指定し、actionで送信先(testform)を指定しています。
9行目は、テキストボックスです。画面から文字を入力します。
10行目は、送信ボタンです。ボタンを押すとsubmitします。

画面イメージ

上記コードの画面イメージです。

 

コントローラのクラス(MainController.java)

コントローラのクラスです。

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MainController {
	
	@GetMapping("/test1")
    public String input1() {
        return "test1/index";
    }

	@GetMapping("/testform")
	public String output1(
		@RequestParam(name = "text1") String str1,
		Model model) {
		model.addAttribute("moji1", str1);
		return "test1/testform";
	}
}

12行目は、test1フォルダ配下のindex.htmlを画面に表示します。

17行目の@RequestParamは、リクエストパラメータを受け取ります。
index.htmlで入力された値は、変数str1にセットされます。
19行目は、addAttributeメソッドで変数str1をセットしています。

20行目は、test1フォルダ配下のtestform.htmlを画面に表示します。

 

値を受け取る側のファイル(testform.html)

値を受け取る側のファイルです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>submit</title>
  </head>
  <body>
    <p th:text="${moji1}"></p>
  </body>
</html>

8行目は、コントローラから渡された値を表示します。

 

実行して確認する

起動※してブラウザに以下のURLを入力するとindex.htmlが画面に表示されます。
※プロジェクトを右クリックしてSpring Bootアプリケーションをクリック。

http://localhost:8080/test1/
http://localhost:8765/test1/

値を入力してボタンを押すと別の画面に値を渡して表示します。

関連の記事

Spring Tool Suite 4(STS)をインストールする手順
SpringBoot hello worldを表示するサンプル
SpringBoot JPAでMySQLにselectするサンプル
SpringBoot DI(依存性の注入)のサンプル
SpringBoot AOPのサンプル
SpringBoot JSONの送信と受信のサンプル

△上に戻る