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

.submit事件附加了提交到this的表单。您可以使用它来指定jQuery需要以哪种形式查找类。

$('.SampleForm').submit(function(event) {
  var score1 = $('.score1', this).val();
  var score2 = $('.score2', this).val();

  console.log('score1', score1);
  console.log('score2', score2);

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/mark/update" method="get" class="SampleForm">
  <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
  <input type="text" value="1" name="score1" class="score1" size="2">
  <input type="text" value="2" name="score2" class="score2" size="2">
  <input type="submit" value="update" class="btn btn-primary" />
</form>

<form action="/mark/update" method="get" class="SampleForm">
  <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
  <input type="text" value="3" name="score1" class="score1" size="2">
  <input type="text" value="4" name="score2" class="score2" size="2">
  <input type="submit" value="update" class="btn btn-primary" />
</form>

请注意，您只能在文档中使用id一次。您的SampleForm无效，因为它用于所有表单。

Answer 2

您正在生成6个具有相同ID jQuery(window).load(function(){ jQuery(".loader").fadeOut("slow"); });的表单。当有多个具有相同ID的节点时，第一个总是出现。

您可以改用className作为表单：

#SampleForm

然后聆听其中任何一个的提交：

<form class="SampleForm">

但是，您仍然有第二期。您正在尝试使用输入元素的类名和第一种形式的action属性获取数据。您可以改为：

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

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

2 个答案: