如何从JSP页面的两个独立表单中向Servlet传递参数

这个问题我之前做项目时也碰到过，核心痛点就是两个独立表单提交时只会携带自身内部的参数，所以要让Servlet同时拿到这两个值，得想办法把它们放到同一次请求里。下面给你几个实用的解决方案，你可以根据自己的页面结构选：

这是最简单直接的方式，如果页面结构允许的话，把下拉选择器和菜单按钮放到同一个表单里，这样点击任意提交按钮时，都会把表单内的所有参数一起发送到Servlet。

示例代码（补全了下拉选择的核心控件，你可以根据自己的自定义样式调整）：

<form action="${pageContext.request.contextPath}/helloServlet" method="post">
    <!-- 下拉选择控件（如果是自定义下拉样式，确保选中值绑定到这个控件） -->
    <select name="curr_val" id="currSelect" style="display:none;">
        <option value="val1">Value 1</option>
        <option value="val2">Value 2</option>
    </select>
    <!-- 自定义下拉触发按钮 -->
    <button class="dropbtn" type="button" id="dropbtn">Choose a Value</button>
    <!-- 菜单按钮组 -->
    <button type="submit" name="button" class="demobtn">Menu button 1</button>
    <button type="submit" name="button" class="demobtn">Menu button 2</button>
</form>

Servlet中获取值的代码：

String currVal = request.getParameter("curr_val");
String buttonAction = request.getParameter("button");
// 后续业务逻辑处理

如果页面结构不允许合并表单，可以用JS监听提交事件，把另一个表单的值通过临时隐藏域添加到当前提交的请求里。

示例代码：
首先给两个表单加上ID方便操作：

<form id="dropForm" action="${pageContext.request.contextPath}/helloServlet" method="post">
    <button class="dropbtn" type="submit" value="test" name="curr_val" id="dropbtn">Choose a Value</button>
</form>

<form id="menuForm" action="${pageContext.request.contextPath}/helloServlet" method="post">
    <button type="submit" name="button" class="demobtn">Menu button 1</button>
</form>

添加JS逻辑：

// 监听菜单表单提交，带上下拉表单的值
document.getElementById('menuForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    
    // 获取下拉按钮的value值
    const currVal = document.getElementById('dropbtn').value;
    
    // 创建临时隐藏域，把值加入当前表单
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'curr_val';
    hiddenInput.value = currVal;
    this.appendChild(hiddenInput);
    
    // 执行提交，此时请求会同时携带button和curr_val参数
    this.submit();
});

// 同理，如果需要点击下拉按钮提交时带上菜单按钮的默认值
document.getElementById('dropForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const defaultButtonVal = document.querySelector('.demobtn').textContent;
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'button';
    hiddenInput.value = defaultButtonVal;
    this.appendChild(hiddenInput);
    this.submit();
});

Servlet的取值方式和第一种方案完全一致，用request.getParameter即可获取两个参数。

如果用户会先操作下拉表单（比如先选择值），可以把选中的值存储到页面全局的隐藏域里，提交菜单表单时自动带上这个值。

示例代码：

<!-- 全局隐藏域，用来持久化下拉选中值 -->
<input type="hidden" id="savedCurrVal" value="">

<!-- 下拉表单（改成点击按钮更新隐藏域，而非直接提交） -->
<form id="dropForm" action="#" method="post">
    <button class="dropbtn" type="button" id="dropbtn">Choose a Value</button>
    <!-- 自定义下拉选项 -->
    <div class="dropdown-content">
        <a href="#" data-value="val1">Value 1</a>
        <a href="#" data-value="val2">Value 2</a>
    </div>
</form>

<!-- 菜单表单，添加隐藏域同步全局值 -->
<form action="${pageContext.request.contextPath}/helloServlet" method="post">
    <input type="hidden" name="curr_val" id="hiddenCurrVal">
    <button type="submit" name="button" class="demobtn">Menu button 1</button>
</form>

JS逻辑：

// 点击下拉选项时更新全局隐藏域
document.querySelectorAll('.dropdown-content a').forEach(item => {
    item.addEventListener('click', function(e) {
        e.preventDefault();
        const selectedVal = this.getAttribute('data-value');
        document.getElementById('savedCurrVal').value = selectedVal;
        document.getElementById('dropbtn').textContent = `Selected: ${selectedVal}`;
    });
});

// 菜单表单提交前，把全局隐藏域的值同步到表单内的隐藏域
document.querySelector('form[action*="helloServlet"]').addEventListener('submit', function() {
    document.getElementById('hiddenCurrVal').value = document.getElementById('savedCurrVal').value;
});

这样提交菜单表单时，curr_val和button的值就会一起被发送到Servlet中。

内容的提问来源于stack exchange，提问作者Gyn Manstot