Question

我有3个表单，每个表单都有相同的类，每个表单都会执行ajax jquery。我尝试在下面的代码中发送Ajax，但是它正在为每个表单发送请求。

var form = $(".forms");

form.submit(function() {
  $.ajax({
    url: 'Servlet',
    type: "POST",
    data: {
      to: $(".param1 option:selected").val(),
      from:  $(".param2 option:selected").val(),
    },
    success: function(data)
    {
      alert("worked");
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(jqXHR+" : "+textStatus+" : "+errorThrown);
    }
  });
})

这里是jsp代码

<c:forEach begin="1" end="3" var="i">
            <div>
                <form method="post" class="forms" action="Servlet" name="forumlario-${i}" onsubmit="return false;">
                    <div>
                        <select class="param1" name="param1">
                            <option value="11">11</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                        </select>
                    </div>
                    <div>
                        <select class="param2" name="param2">
                            <option value="11">11</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                        </select>
                    <div>
                        <button type="submit" value="calcular" id="calcular" >calcular</button> 
                    </div>
                </form>
            </div>
</c:forEach>

如何获取被点击并执行ajax的特定表单？

我找不到解决方案，现在通过atributte名称获取表格

//attribute form 1 = name="forums-1"
//attribute form 3 = name="forums-2"
//attribute form 2 = name="forums-3"

然后我找到的解决方案是重播代码3x

$('[name="forums-1"]').submit(function() {
                //code omitted
 });
$('[name="forums-2"]').submit(function() {
                //code omitted
});
$('[name="forums-3"]').submit(function() {
                //code omitted
});

但不是干净的代码，我应该怎么做只为表单

的1个声明

Answer 1

您已经多次更改过您的问题，因此答案会不断变化。

如何获取被点击并执行ajax的特定表单？

要获取已提交的三者的特定表单实体，您可以使用.submit(function() {})在this内部执行此操作。 this变量将代表已提交的三个.forms的特定表单。然后，您可以根据返回的this

执行必要的功能

form.submit(function() {
  $(this); //represents the SPECIFIC form that was submitted
});

Answer 2

如果我正确理解你，那么就不会发送ajax。您应该尝试将return false添加到传递给提交的函数，以防止表单执行其默认行为，而是发出AJAX请求

form.submit(function() {
  $.ajax({
    url: 'Servlet',
    type: "POST",
    data: {
      to: $("#param1 option:selected").val(),
      from:  $("#param2 option:selected").val(),
    },
    success: function(data)
    {
      alert("worked");
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(jqXHR+" : "+textStatus+" : "+errorThrown);
    }
  });
  return false;
})

Ajax jquery与Post的类表单

2 个答案: