Html 使用AJAX调用SpringBoot控制器时出错，调用的是document.getElementByID（#id）.val（）吗？

对于我的uni项目，我正在开发一个springbootweb应用程序，在使用AJAX成功调用控制器路由时遇到问题。我创建了一个动态表，该表使用JPA选择X=True的所有对象，并且需要为每一行实现一个按钮，该按钮将向控制器发送请求，并通过将值更改为非True从数据库中删除该行，因此刷新时的表不应再将该行显示为X=False

目前，我的JQuery ajax脚本导致了一个错误，我确信我试图错误地调用它。请执行“数据”部分，但我不知道如何正确调用#athleteID.val（），如果我需要这样做的话。我添加了输出语句以进行故障排除，但没有打印任何内容，并且出现错误：
java.lang.NumberFormatException:对于输入字符串：“$（“#athleteID”）.val（）”↵ 位于java.base/java.lang.NumberFormatException.forInputString（NumberFormatException.java:65）↵ 代码： HTML表格

<tbody>
<tr th:each="athlete : ${listApplicants}">
 <td id="athleteID" th:text="${athlete.athleteID}">Athlete ID</td>
 <td id="name" 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" type="submit" id="acceptButton">ACCEPT</button></td>
</tr>
</tbody>

控制器

@RequestMapping("/applicantToAthlete")
@ResponseBody
public String applicantToAthlete(@RequestParam String id, HttpServletRequest request, HttpServletResponse response, Model model) {
    Long athleteID = Long.parseLong(id);
    System.out.println("////////////////////////" + athleteID);
    Optional<Athlete> optionalAthlete = athleteAuditor.findAthleteById(athleteID);

   Athlete athlete = optionalAthlete.get();
    System.out.println("////////////////////////" + athlete.toString());
    athlete.setApplicationStatus(false);
    System.out.println("////////////////////////" + athlete.getApplicationStatus());
 athleteAuditor.updateAthlete(athlete);
 return "applicants";
}

@RequestMapping（/applicationtoatathlete）
@应答器
公共字符串applicationToAthlete（@RequestParam字符串id，HttpServletRequest请求，HttpServletResponse响应，模型）{
Long-athleteID=Long.parseLong（id）；
System.out.println（“//////”+athleteID）；
可选OptionalAthletitor=athleteAuditor.findAthleteById（athleteID）；
运动员=可选运动员。获取（）；
System.out.println（“////”+ATYLETOR.toString（））；
运动员。设置应用程序状态（假）；
System.out.println（“//////”+atternate.getApplicationStatus（））；
运动员（运动员）；
返回“申请人”；
}

---

谢谢你的帮助

您不能对多个元素使用相同的

id

，而是使用

class

选择器。您还需要使用

.text（）

获取

td

值。因此，更改jsp代码如下：

<tbody>
<tr th:each="athlete : ${listApplicants}">
 <td class="athleteID" th:text="${athlete.athleteID}">Athlete ID</td>
 <td class="name" th:text="${athlete.name}">Name</td>
  <!--other datas-->
 <td><button class="button" type="submit" class="acceptButton">ACCEPT</button></td>
</tr>
</tbody>

$(".acceptButton").click(function(e) {
  e.preventDefault()
//get athlete id
  var id = $(this).closest("tr").find(".athleteID").text().trim()
  $.ajax({
    type: "GET",
    url: "/applicantToAthlete",
    data: {
      "id": id//pass same
    },
    success: function(data) {
      //response from controller
    }
  });
});

---

您不能对多个元素使用相同的

id

，而是使用

class

选择器。您还需要使用

.text（）

获取

td

值。因此，更改jsp代码如下：

<tbody>
<tr th:each="athlete : ${listApplicants}">
 <td class="athleteID" th:text="${athlete.athleteID}">Athlete ID</td>
 <td class="name" th:text="${athlete.name}">Name</td>
  <!--other datas-->
 <td><button class="button" type="submit" class="acceptButton">ACCEPT</button></td>
</tr>
</tbody>

$(".acceptButton").click(function(e) {
  e.preventDefault()
//get athlete id
  var id = $(this).closest("tr").find(".athleteID").text().trim()
  $.ajax({
    type: "GET",
    url: "/applicantToAthlete",
    data: {
      "id": id//pass same
    },
    success: function(data) {
      //response from controller
    }
  });
});

---

嗨，你试过下面的代码吗？嗨，你试过下面的代码吗？