Question

我编写了打击代码，当我点击每个表单提交按钮时，我会发送我的表格。我的问题是如何分别发送每个表单并分别指出每个结果。因为当我的代码运行时，所有表单将同时提交。这是我的代码：

$("#done").click(function(e) { 
var url = 'secondpage.htm'
$.ajax({ type: "POST", url: url, data: $("#done").serialize(),
 success: function(data) { 
$('.divs').empty()

$(".divs").html(data)

  } }); e.preventDefault();
 });

form{
	width:100px;
	border:1px solid blue;
	height:50px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>

Answer 1

您需要提交来自更改按钮type="submit"

注意：我在表单中添加了divs。以防止在ajax调用后删除表单

<强>更新

＆＃13;

$("form").on('submit',function(e) {
  var url = 'secondpage.htm'
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).serialize(),
    success: function(data) {
      $(this).find('.divs').empty
      $(this).find('.divs').html(data)

    }
  });
  e.preventDefault();
});

＆＃13;

form {
  width: 100px;
  border: 1px solid blue;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

  <form>
    <button id="done" type="submit">done</button>
    <div class="divs">
    </div>
  </form>
  
  <form>
    <button id="done" type="submit">done</button>
    <div class="divs">
    </div>
  </form>


  <form>
    <button id="done" type="submit">done</button>
    <div class="divs">
    </div>
  </form>

＆＃13;

Answer 2

您的实际代码中存在许多问题，我们可以从中声明：

为页面中的多个元素提供相同的id，您可以改为使用class。
使用$("#done").serialize()，您只使用id="done"序列化第一个元素，而不是form。
您要覆盖.divs内容，以便从包含$('.divs').empty()和$(".divs").html(data)的网页中删除您的表单，最好使用特定元素来显示回复并使用.text()填写内容的方法。

我尝试重构您的代码，以便按照您想要的方式运行，这就是您需要的内容：

$(".done").click(function(e) {
  var url = 'secondpage.htm';
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).closest('form').serialize(),
    success: function(data) {
      //$('.divs').empty() You will erase your form here
      $(this).closest('.preview').text(data)
    }
  });
  e.preventDefault();
});

<强>演示：

＆＃13;

$(".done").click(function(e) {
  var url = 'secondpage.htm';
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).closest('form').serialize(),
    success: function(data) {
      //$('.divs').empty() You will erase your form here
      $(this).closest('.preview').text(data)
    }
  });
  e.preventDefault();
});

＆＃13;

form {
  width: 100px;
  border: 1px solid blue;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
  <form>
    <button class="done">done</button>
  </form>
  <div class="preview"></div>
</div>
<div class="divs">
  <form>
    <button class="done">done</button>
  </form>
  <div class="preview"></div>
</div>
<div class="divs">
  <form>
    <button class="done">done</button>
  </form>
  <div class="preview"></div>
</div>

＆＃13;

注意：

我使用done类而不是id，并将其引用 JS代码中的$('.done')。

点击按钮时，我使用$(this).closest('form').serialize()分别序列化了相应的form。

我在每个表单中添加了一个带class="preview"的div来保存显示的响应，并在JS代码中用$(this).closest('.preview').text(data)填充它。

使用$(this).closest()我们肯定只会处理包含点击按钮的表单。

我该如何单独发送表单？

2 个答案: