【Spring Boot】1つのformで複数のPOST送信を行う方法

この記事は、1つのフォーム要素に複数のボタンがあってそれぞれ別のPOST送信をしたい場合のコードを解説します。

方法①：HTML要素のformaction属性を使う

方法①：HTML要素のformaction属性を使う

HTML要素のformaction属性を使うことで複数ボタンでPOSTを振り分けることが出来ます。

遷移元ページ

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 method="post">
    <label>
        メッセージ：<input type="text" name="msg1"><br>
    </label>

    <button style="background-color: yellowgreen;" formaction="/result">送信</button>
    <button style="background-color: pink;" formaction="/result2">送信2</button>
</form>
</body>
</html>

解説

form要素内のタグでは特にaction要素を記述する必要はありません。

1つ目のボタンではformaction="/result"としているのでPOST先が/resultになります。
2つ目のボタンではformaction="/result2"としているのでPOST先が/result2になります。

コントローラ側

コントローラ側は以下のように記述します。

BaseController.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.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,Model model){
        model.addAttribute("message1","result1です。");
        return "result";
    }

    @PostMapping("/result2")
    public String result2(@RequestParam String msg1,Model model){
        model.addAttribute("message1","result2です。");
        return "result2";
    }
}

遷移先ページ

POST先が/resultの場合は以下のページに遷移します。

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>
    <h2>resultページ</h2>
    <p>メッセージ1：<span th:text="${message1}"></span></p>
</body>
</html>

POST先が/result2の場合は以下のページに遷移します。

result2.html

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