SpringBoot控制器AJAX调用参数传递错误排查求助

架构老林

2026-5-11

问题分析与解决方案

看起来你遇到了几个关键问题，导致AJAX请求无法正确传递参数，咱们一步步来解决：

核心问题梳理

重复ID违反HTML规范：你在每个<tr>里都用了id="athleteID"，但HTML要求ID必须唯一，这会导致$("#athleteID").val()只能获取到第一行的ID，后续行的按钮点击都会拿到错误的值。
AJAX参数传递错误：你写的data : { "id" : "athleteID.val()" }是把字符串"athleteID.val()"直接传给了后端，而不是执行方法获取实际ID值，这就是后端抛出NumberFormatException的原因。
动态元素事件绑定失效：因为表格是通过Thymeleaf动态生成的，直接用$("#acceptButton").click()只能绑定页面加载时已存在的第一个按钮，后续生成的按钮不会触发事件。

解决方案步骤

1. 修改HTML表格结构

去掉重复ID，用自定义data属性存储每行的athleteID，同时把按钮的ID改为class（因为class可以复用）：

<tbody>
<tr th:each="athlete : ${listApplicants}" data-id="${athlete.athleteID}">
<td th:text="${athlete.athleteID}">Athlete ID</td>
<td th:text="${athlete.name}">Name</td>
<td th:text="${athlete.gender}">Gender</td>
<td th:text="${athlete.dob}">Date of Birth</td>
<td th:text="${athlete.mobileNumber}">Mobile Number</td>
<td th:text="${athlete.guardianContactNumber}">Guardian Number</td>
<td th:text="${athlete.applicationStatus}">Application Status</td>
<td><button class="button accept-button" type="button">ACCEPT</button></td>
</tr>
</tbody>

给<tr>添加data-id="${athlete.athleteID}"，把当前行的ID存在行元素上
按钮用class="accept-button"代替唯一ID，方便批量绑定事件

2. 修正JQuery AJAX代码

使用事件委托绑定动态生成的按钮，同时正确获取对应行的ID：

$(document).ready(function() {
  // 事件委托：监听document上的点击事件，匹配所有.accept-button按钮
  $(document).on('click', '.accept-button', function(e) {
    e.preventDefault();
    console.log('Button clicked');
    
    // 获取当前按钮所在行的data-id值
    const athleteId = $(this).closest('tr').data('id');
    console.log('Target Athlete ID:', athleteId); // 调试用，确认拿到正确ID

    $.ajax({
      type: "GET",
      url: "/applicantToAthlete",
      data: { "id": athleteId }, // 直接传递拿到的ID数值
      success: function(response) {
        // 请求成功后，直接移除当前行，无需刷新页面
        $(this).closest('tr').remove();
        console.log('Application status updated successfully');
      },
      error: function(xhr, status, error) {
        // 增加错误处理，方便调试
        console.error('Request failed:', error);
      }
    });
  });
});

事件委托$(document).on('click', '.accept-button', ...)可以处理动态生成的按钮
$(this).closest('tr').data('id')精准获取当前按钮所在行的athleteID

3. 优化后端控制器代码

直接用Long类型接收参数，同时增加空值判断避免异常：

@RequestMapping("/applicantToAthlete")
@ResponseBody
public String applicantToAthlete(@RequestParam Long id) {
    Optional<Athlete> optionalAthlete = athleteAuditor.findAthleteById(id);
    if (optionalAthlete.isPresent()) {
        Athlete athlete = optionalAthlete.get();
        athlete.setApplicationStatus(false);
        athleteAuditor.updateAthlete(athlete);
        return "Success"; // 返回明确的成功标识
    } else {
        return "Athlete not found"; // 处理ID不存在的情况
    }
}

直接用Long id接收参数，Spring会自动完成类型转换，避免手动parseLong出错
增加optionalAthlete.isPresent()判断，防止Optional.get()抛出NoSuchElementException

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