javascript - 提交没有表单 ID 的表单

Question

我需要通过 Ajax 调用提交表单，但我在选择表单时遇到了问题。我不想使用表单 ID，因为我有多个表单，我需要为所有表单设置一个代码

$(".pay").on("click",function(){
  var form = $(this).closest(".card-body").find("form");
  //$(form).submit(function(e) {
  e.preventDefault();
  var formData = $(form).serialize();
  $.ajax({
    type: 'POST',
    url    : "php/pay.php",
    data: formData
  })
  .done(function(response) {
  })
  //});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card" >
  <div class="card-header">
    <h1>XXX</h1>		
  </div>
  <div class="card-body" >
    <form>	
      <input name="user" value="mat" type="hidden">
      <input name="id" value="12" type="hidden">
    </form>
    <button class="btn btn-success pay" value="pay">pay</button>
    <button class="btn btn-danger decline" value="decline" >decline</button>
  </div>
</div>

Answer 1

无需添加 form submit 代码，因为您正在阻止提交，所以您什么时候点击只需从表单中获取数据并调用您的 AJAX 服务。

我添加了一个控制台日志，您可以在其中查看表单数据。

$(".pay").on("click",function(){
  var form = $(this).closest(".card-body").find("form");
  var formData = $(form).serialize();
  console.log(formData);
  $.ajax({
    type: 'POST',
    url    : "php/pay.php",
    data: formData
  })
  .done(function(response) {});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <div class="card-header">
    <h1>XXX</h1>		
  </div>
    <div class="card-body" >
      <form>	
        <input name="user" value="mat" type="hidden">
        <input name="id" value="12" type="hidden">
      </form>
      <button class="btn btn-success pay" value="pay">pay</button>
      <button class="btn btn-danger decline" value="decline" >decline</button>
  </div>
</div>