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

您的代码是在每次单击按钮时创建提交处理程序，您要做的就是发送ajax调用onclick，因此只需执行该部分。

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

.find还返回jQuery对象，无需再次使其成为Jquery对象，将使用简单的形式代替$(form) ..而是像var $form = $(this).closest(".card-body").find("form")那样声明

如下所示，尝试

$(".pay").on("click",function(){
    var $form = $(this).closest(".card-body").find("form");
        e.preventDefault();
        var formData = $form.serialize();
        submitForm(formData);
});

function submitForm(formData){
       $.ajax({
            type: 'POST',
            url    : "php/pay.php",
            data: formData
            })
            .done(function(response) {
            })
}

我已经创建了以下示例以供参考

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

.card {
  width: 50%;
  float: left;
}

<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>

  <div class="card">
    <div class="card-header">
      <h1>YYY</h1>
    </div>
    <div class="card-body">
      <form>
        <input name="user2" value="mat2" type="hidden">
        <input name="id2" value="122" type="hidden">
      </form>
      <button class="btn btn-success pay" value="pay">pay2</button>
      <button class="btn btn-danger decline" value="decline">decline2</button>


    </div>
  </div>

Answer 2

由于您要阻止提交，因此无需添加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>

Answer 3

这将帮助您减少重复的代码。

$(document).ready(function() {
    $('form').on('submit', function(e){
        e.preventDefault();
        Var action = $(this).action;
        Var method = $(this).method; 
        Var data = $(this).serialize();
         // perform ajax operation here with data, action and method
    }); 
});

快乐编码：）

Answer 4

Erm ..为什么不只是将两个按钮放在表单内，以避免脚本可能触发另一种“多种表单”并通过父元素引用无名表单的混乱或偶然性，喜欢吗？

html：

<form>
   <input name="user" value="mat" type="hidden">
   <input name="id" value="12" type="hidden">
   <button class="btn btn-success pay" value="pay">pay</button>
   <button class="btn btn-danger decline" value="decline">decline</button>
</form>

脚本：

$(function() {
   $(".pay").on("click", function(e) {
     var $form = $(this).parent();
     e.preventDefault();
     var formData = $form.serialize();
     submitForm(formData);
});

Answer 5

$(".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>

提交没有表单ID的表单

5 个答案: