如何实现点击按钮将值传递至Spring Controller？

问题分析 #

你当前的代码存在几个关键问题导致值无法传递：

• 提交按钮未被<form>标签包裹，点击后不会触发HTTP请求
• 按钮绑定了模态框弹窗逻辑，默认会优先打开模态框而不触发表单提交
• 控制器使用@GetMapping，但submit按钮默认发起POST请求（未指定表单method时）

解决方案一：直接提交表单传值 #

如果不需要打开模态框，仅需提交值到控制器，修改前端代码如下：

<td>
    <form th:action="@{/inventoryReport}" method="get">
        <button type="submit" th:value="${inventoryReportDaily.id}" name="StockinDetails" 
                style="border: none;">
            <span th:text="${inventoryReportDaily.quantity_in}" style="color:blue;"></span>
        </button>
    </form>
</td>

控制器代码保持不变，点击按钮后，StockinDetails参数会携带inventoryReportDaily.id的值传入方法。

解决方案二：打开模态框并传值（后续提交） #

如果需要先打开模态框，再在模态框内提交值，需通过JS先把按钮的value传递到模态框的表单中：

1. 前端按钮与模态框代码：

<td>
    <button type="button" th:data-id="${inventoryReportDaily.id}" 
            data-toggle="modal" data-target="#StockinModal" style="border: none;">
        <span th:text="${inventoryReportDaily.quantity_in}" style="color:blue;"></span>
    </button>
</td>

<!-- 模态框 -->
<div class="modal fade" id="StockinModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form th:action="@{/inventoryReport}" method="get">
                <input type="hidden" name="StockinDetails" id="modalStockinId">
                <!-- 模态框其他内容 -->
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>

2. 添加JavaScript监听模态框打开事件，传递值：

$('#StockinModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // 触发模态框的按钮
    var id = button.data('id'); // 获取按钮上的data-id值
    var modal = $(this);
    modal.find('#modalStockinId').val(id); // 将值赋值给模态框内的隐藏输入框
});

控制器代码保持不变，点击模态框的提交按钮后，值会传递到控制器的StockinDetails参数中。

额外注意点 #

• 参数名需完全匹配：前端name="StockinDetails"与控制器方法的参数名Integer StockinDetails必须一致
• 若使用POST请求，需将控制器的@GetMapping改为@PostMapping，同时表单设置method="post"；POST请求建议用隐藏输入框传值，确保参数能被正确接收

内容的提问来源于stack exchange，提问作者Jav JakSmoke