Java Spring Boot フォームの値を別画面に渡す

nas

JavaのSpring Bootでフォームの値をsubmitで別画面に渡すサンプルです。

確認環境
・Spring Boot 2.3.3
・JDK 11.0.2
・STS 4.7.2

目次

サンプル 環境
  画面表示までの流れ
  値を送信する側のファイル(index.html)
  コントローラのクラス(MainController.java)
  値を受け取る側のファイル(testform.html)
参考 パラメータをREST形式で受ける場合
  画面にJSONを返す(リスト)
  画面にJSONを返す(マップ)
  (type=Not Found, status=404)のエラーが発生する

環境

テンプレートエンジンは、Thymeleaf(タイムリーフ)を使用しています。

説明用として以下３つのファイルがあります。
１．index.html・・・値を送信する側のファイル。画面でテキストを入力しsubmitを行って値を送信します。
２．MainController.java・・・コントローラです。アクセスするURLに従ってファイルを返します。
３．testform.html・・・値を受け取る側のファイル。index.htmlから値を受け取って画面に表示します。

※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

画面表示までの流れ

画面表示までの流れは、以下のとおりです。
１．MainControllerクラスにアクセス→index.htmlをブラウザに返す。
２．index.htmlのformのsubmitでMainControllerクラスにアクセス→testform.htmlをブラウザに返す。

 

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>submit</title>
</head>
<body >
<form method="get" 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.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

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

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

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

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

22行目は、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>

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

画面に表示する

起動してブラウザに以下のURLを入力するとindex.htmlが画面に表示されます。

http://localhost:8080/test1

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

 

パラメータをREST形式で受ける場合

URLの一部をパラメータ(REST形式)として受け取るサンプルです。

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("/test1")
public class MainController {

	@RequestMapping(value = "testform/{p1}", method = RequestMethod.GET)
	public String output1(
		@PathVariable("p1") String str1,
		Model model) {
		model.addAttribute("moji1", str1);
		return "test1/testform";
	}
}

12行目は、URLの箇所をtestform/{p1}にしています。p1がパラメータです。
14行目は、@PathVariableを指定しています。

ブラウザに以下のURLを入力した場合、

http://localhost:8080/test1/testform/sss

sssがパラメータになり画面にはsssと表示されます。

 

画面にJSONを返す(リスト)

画面にJSON(リスト)を返すサンプルです。

package com.example.demo;
import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/test1")
public class MainController {

	@RequestMapping(value = "testform", method = RequestMethod.GET)
	@ResponseBody
	public List<String> output1() {
			List<String> list1 = new ArrayList<>();
			list1.add("赤");
			list1.add("黄");
			list1.add("青");
			return list1;
	}
}

15行目は、@ResponseBodyアノテーションを追加しています。
21行目は、リストを返しています。クラスのオブジェクトを返すとJSON形式の戻り値になります。

ブラウザに以下のURLを入力した場合、

http://localhost:8998/test1/testform

画面には、以下のようなJSONが表示されます。

["赤","黄","青"]

 

画面にJSONを返す(マップ)

画面にJSON(マップ)を返すサンプルです。

package com.example.demo;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/test1")
public class MainController {

	@RequestMapping(value = "testform", method = RequestMethod.GET)
	@ResponseBody
	public Map<String,String> output1() {
		Map<String,String> map1 = new HashMap<>();
		map1.put("a", "赤");
		map1.put("b", "黄");
		map1.put("c", "青");
		return map1;
	}
}

16行目は、@ResponseBodyアノテーションを追加しています。
18行目は、マップを返しています。クラスのオブジェクトを返すとJSON形式の戻り値になります。

ブラウザに以下のURLを入力した場合、

http://localhost:8998/test1/testform

画面には、以下のようなJSONが表示されます。
{"a":"赤","b":"黄","c":"青"}

 

(type=Not Found, status=404)のエラーが発生する

pom.xmlにthymeleafの依存性の記述がないと上記エラーが表示されます。
pom.xmlに以下を追加します。

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

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

Sun Sep 13 18:13:37 JST 2020
There was an unexpected error (type=Not Found, status=404).

関連の記事

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

△上に戻る