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(タイムリーフ)を使用しています。
説明用として以下3つのファイルがあります。
1.index.html・・・値を送信する側のファイル。画面でテキストを入力しsubmitを行って値を送信します。
2.MainController.java・・・コントローラです。アクセスするURLに従ってファイルを返します。
3.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
画面表示までの流れ
画面表示までの流れは、以下のとおりです。
1.MainControllerクラスにアクセス→index.htmlをブラウザに返す。
2.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.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
@RequestMapping("/test1")
public class MainController {
@GetMapping
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";
}
}
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形式で受ける場合(MainController.java)
URLの一部をパラメータ(REST形式)として受け取るサンプルです。
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.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/test1")
public class MainController {
@GetMapping("/testform/{p1}")
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を返す(リスト)(MainController.java)
画面にJSON(リスト)を返すサンプルです。
package com.example.demo;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/test1")
public class MainController {
@GetMapping("/testform")
@ResponseBody
public List<String> output1() {
List<String> list1 = new ArrayList<>();
list1.add("赤");
list1.add("黄");
list1.add("青");
return list1;
}
}
15行目は、@ResponseBodyアノテーションを追加しています。
21行目は、リストを返しています。
ブラウザに以下のURLを入力した場合、
http://localhost:8080/test1/testform
画面には、以下の文字列が表示されます。
["赤","黄","青"]
(参考)画面にJSONを返す(マップ)(MainController.java)
画面にJSON(マップ)を返すサンプルです。
package com.example.demo;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/test1")
public class MainController {
@GetMapping("/testform")
@ResponseBody
public Map<String,String> output1() {
Map<String,String> map1 = new HashMap<>();
map1.put("a", "赤");
map1.put("b", "黄");
map1.put("c", "青");
return map1;
}
}
15行目は、@ResponseBodyアノテーションを追加しています。
17行目は、マップを返しています。mapクラスのオブジェクトを返すとJSON形式の戻り値になります。
ブラウザに以下のURLを入力した場合、
http://localhost:8080/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)をインストールする手順
SpringBootでhello worldを表示するサンプル
SpringBoot JPAでMySQLにselectするサンプル
SpringBoot DI(依存性の注入)のサンプル
SpringBoot AOPのサンプル
SpringBoot JSONの送信と受信のサンプル