【Spring Boot】入力値を送信して、画面に表示してみる【Thymeleaf】

spring boot

まずは入力する画面のHTML

<!DOCTYPE html>
<!-- Thymeleafで使用するthタグを認識するための記述 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Hello world</title>
</head>
<body>
  <form action="/submit" method="post">
	  名前:<input type="text" name="name">
	  <input type="submit" value="Submit" />
  </form>
</body>
</html>

コントローラ側

package com.example.demo;

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

@Controller
public class DemoController {

  // アクセスする際に使用するURLを設定
  @RequestMapping("/demo")
  public String demo(Model model) {
    // "message"という変数に「Hello world」という文字列を設定
    model.addAttribute("message", "Hello world");
    // 返却するテンプレートファイル名を指定
    return "demo";
  }
  
  @PostMapping("/submit")
  public String displayText(@RequestParam String name, Model model) {
      model.addAttribute("name", name);
      return "next";
  }
}

リクエストパラメータの変数名は、htmlのinputタグのnameに合わせる必要がある

@RequestParam String name

送信されたデータを表示するHTML

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>名前の表示</title>
</head>
<body>
    ようこそ、<p th:text="${name}"></p>さん。
</body>
</html>

送信データの受け渡しができました。

タイトルとURLをコピーしました