如何通过JavaScript和Spring实现点击开关时获取appID与auto_detail_id

1. 修正Thymeleaf页面代码 #

首先修复循环中重复ID的问题（id="appID"会在循环生成多个相同ID，导致JS只能获取第一个值），同时优化隐藏字段标识，修正标签语法错误：

<div class="column val" th:each="nameApp, iStat : ${listAppName}">
  <div class="Checkbox">
    <!-- 给隐藏字段添加class，方便JS定位 -->
    <input type="hidden" class="autoDetailId" th:value="${nameApp.auto_detail_id}">
    <!-- 把id改为class，避免重复 -->
    <input type="hidden" class="appID" th:value="${nameApp.application_id}">
    <input type="checkbox" data-toggle="toggle" data-size="small">
    <!-- 修复span标签的语法错误 -->
    <label><span th:text="${nameApp.application_name}"></span></label>
  </div>
</div>

注：如果需要显示application_id，可以保留type="text"，但仍需用class替代id避免重复。

2. 修改JavaScript代码，获取两个ID值 #

在点击事件中，从当前触发点击的.val容器内，通过class定位对应的两个隐藏字段，获取值后可发送给后端：

$(".val").click(function() {
    // 从当前点击容器内获取auto_detail_id
    let autoDetailId = $(this).find('.autoDetailId').val();
    // 从当前点击容器内获取application_id
    let appID = $(this).find('.appID').val();
    // 获取开关状态
    var checkedValue = $(this).find(':checkbox').is(":checked") ? 'On' : 'Off';
            
    console.log("auto_detail_id: " + autoDetailId);
    console.log("appID: " + appID);
    console.log("状态: " + checkedValue);

    // 调用函数把数据传给Spring后端
    sendStatusToBackend(autoDetailId, appID, checkedValue);
});

// 封装发送请求到后端的函数
function sendStatusToBackend(autoDetailId, appID, status) {
    $.ajax({
        url: "/api/app/update-status", // 后端接口地址
        type: "POST",
        data: {
            autoDetailId: autoDetailId,
            appId: appID,
            status: status
        },
        success: function(response) {
            console.log("状态更新成功: ", response);
            // 可添加成功后的页面提示或刷新逻辑
        },
        error: function(xhr, status, error) {
            console.error("状态更新失败: ", error);
        }
    });
}

3. 编写Spring后端接口 #

创建Controller接收前端参数，调用业务层完成数据库操作（比如更新状态）：

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

@RestController
public class AppStatusController {

    // 注入业务层服务，需自行实现对应的Service和Mapper
    private final AppStatusService appStatusService;

    public AppStatusController(AppStatusService appStatusService) {
        this.appStatusService = appStatusService;
    }

    @PostMapping("/api/app/update-status")
    public String updateAppStatus(@RequestParam("autoDetailId") Long autoDetailId,
                                  @RequestParam("appId") String appId,
                                  @RequestParam("status") String status) {
        // 调用业务层执行状态更新逻辑
        boolean updateResult = appStatusService.updateAppStatus(autoDetailId, appId, status);
        
        return updateResult ? "success" : "failed";
    }
}

关键说明 #

• 避免重复ID：Thymeleaf循环中禁止使用固定ID，否则DOM会出现重复ID导致JS获取元素异常，改用class或data属性定位更可靠。
• 数据传递：通过AJAX将两个ID和开关状态传给后端，后端用@RequestParam接收参数后处理业务逻辑。
• 业务实现：Service层需根据auto_detail_id和appId定位数据库记录，完成状态字段的更新操作。

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