jquery - 我可以对多个 Ajax 调用使用相同的类名吗

Question

我编写了一段代码，使用 jQuery 将 score1、score2 更新到数据库中。

我的 jQuery/AJAX 代码是:

$(document).ready(function() {
  $('#SampleForm').submit(
    function(event) {
      var id = $('.id').val();
      var score1 = $('.score1').val();
      var score2 = $('.score2').val();
      var data = 'score1=' + score1 + '&score2=' + score2 + '&id=' + id;
      $.ajax({
        url: $("#SampleForm").attr("action"),
        data: data,
        type: "GET",

        success: function(response) {
          alert(response);
        },
        error: function(xhr, status, error) {
          alert(xhr.responseText);
        }
      });
      return false;
      location.reload(true)
    });
});

JSP 代码是

<c:forEach var="item" items="${userinuser}">
  <form action="/mark/update" method="get" id="SampleForm">
    <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
    <input type="text" value="${item.userScores.score1}" name="score1" class="score1" size="2">
    <input type="text" value="${item.userScores.score2}" name="score2" class="score2" size="2">
    <input type="submit" value="update" class="btn btn-primary" />
  </form>
</c:forEach>

假设${userinuser}为6，则该JSP页面将动态生成6个表单。
所有 6 种形式都使用与 Score1 相同的类名 score1 和 Score2 与 score2 相同的类名。

我的 AJAX 调用第一次工作(第一个动态生成的表单)，但它不适用于其余 5 个 AJAX 调用。

我知道这种编码方式不适合应用

谁能给我一个好主意吗？

Answer 1

您将生成 6 个具有相同 ID #SampleForm 的表单。当有多个节点具有相同的 ID 时，第一个节点总是会出现。

您可以为表单使用类名:

<form class="SampleForm">

然后听取其中任何一个的提交:

$('.SampleForm').submit(...)

但是，您还有第二个问题。您尝试使用输入元素的类名和第一个表单的操作属性来获取数据。你可以这样做:

 $('.SampleForm').submit(function(event) {
   var data = $(this).serialize(),
       url = $(this).attr('action');

   $.ajax({
       url : url,
       data : data,
       type : "GET",
       ....
   });

   return false;
   location.reload(true)
})