如何将下拉框值传递至Java/Rest控制器？含汇率查询示例

我来帮你解决这个下拉框传参到Rest控制器的问题，结合你给出的汇率查询场景，分两种常见方式来实现：

一、修正并完善你的HTML表单 #

你原来的HTML代码存在两个小问题：一是form的action里额外带了?currencyVal=currency参数（这会覆盖下拉框的实际选中值），二是option标签没有正确闭合。下面是修正后的代码：

<form action="/currencyRate" method="GET" id="currencyForm">
  <select name="currencyVal" form="currencyForm">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="GBP">GBP</option>
    <!-- 可根据需求添加更多货币选项 -->
  </select>
  <input type="submit" value="获取汇率">
</form>

关键说明： #

• 表单的method设为GET（因为汇率查询属于只读操作，符合REST规范）
• 下拉框的name属性设为currencyVal，这个名称要和后端控制器接收参数的名称完全一致
• 点击提交按钮后，浏览器会自动将选中的下拉框值拼接到URL中，比如选中USD时，请求地址会变成/currencyRate?currencyVal=USD

二、编写Java Rest控制器（以Spring Boot为例） #

假设你使用Spring Boot框架开发Rest控制器，下面是接收参数并返回汇率的示例代码：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class CurrencyRateController {

    // 模拟第三方汇率服务，实际开发中可调用真实API（比如ECB、Open Exchange Rates）
    private double getEurToTargetRate(String targetCurrency) {
        switch(targetCurrency) {
            case "USD": return 1.08; // 示例汇率：1 EUR = 1.08 USD
            case "GBP": return 0.85;
            case "EUR": return 1.0;
            default: return 0.0;
        }
    }

    @GetMapping("/currencyRate")
    public String getCurrencyRate(@RequestParam("currencyVal") String selectedCurrency) {
        double exchangeRate = getEurToTargetRate(selectedCurrency);
        
        if(exchangeRate == 0.0) {
            return "暂不支持查询EUR兑" + selectedCurrency + "的汇率";
        }
        return String.format("EUR兑%s的当前汇率为：%.2f", selectedCurrency, exchangeRate);
    }
}

关键说明： #

• @RestController标记这是一个返回JSON/文本的Rest控制器
• @GetMapping("/currencyRate")对应前端表单的GET请求路径
• @RequestParam("currencyVal")用来接收前端传递的下拉框参数，参数名要和下拉框的name完全匹配

三、可选：异步提交（不刷新页面） #

如果不想刷新整个页面来获取汇率，可以用AJAX实现异步请求，下面是基于jQuery的示例：

<form id="currencyForm">
  <select name="currencyVal" id="currencySelect">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="GBP">GBP</option>
  </select>
  <button type="button" id="getRateBtn">获取汇率</button>
</form>
<!-- 用来显示汇率结果的区域 -->
<div id="rateResult" style="margin-top:10px;color:#333;"></div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
    $("#getRateBtn").click(function() {
        // 获取下拉框选中的值
        var selectedCurrency = $("#currencySelect").val();
        
        // 发起异步GET请求
        $.get("/currencyRate", { currencyVal: selectedCurrency }, function(response) {
            // 将返回结果显示在页面上
            $("#rateResult").text(response);
        }).fail(function() {
            $("#rateResult").text("获取汇率失败，请稍后重试");
        });
    });
});
</script>

关键注意点： #

• 异步提交不需要表单的action和method属性，完全通过JS控制请求
• 确保前端和后端的请求路径、参数名完全一致
• 如果前后端部署在不同域名下，需要在后端配置跨域支持

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