如何在同一页面上使用AJAX多个表单

Question

我有一个表单，当我单击“提交”时，该表单即已提交。 然后隐藏该表格，并在div中以classname = dig显示操作页面的结果。

它运行正常，但是当我添加其他表单时，它停止正常运行，并且所有表单同时提交。

如何更改代码？：

 $(".done").click(function(e) { var url = 'http://seller.ir/test' $.ajax({ type: "POST", url: url, data: $(".formi").serialize(), success: function(data) { $('.dig').empty() $('.dig').html(data) } }); e.preventDefault(); }); 

 .dig { width: 200px; height: 30px; border: 1px solid #000 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> 

Answer 1

$(".done").click(function(e) {
   var dig=$(this).parents('.dig');
  var url = 'http://seller.ir/test'
  $.ajax({
    type: "POST",
    url: url,
    data: $(this).parent('.formi').serialize(),
    success: function(data) {
      $(dig).empty()

      $(dig).html(data)
    }
  });
  e.preventDefault();
});

Answer 2

您应该只清空并填充相应的dig元素

$(".done").click(function(e) {
   var url = 'http://seller.ir/test';
   var digElement=$(this).parents('.dig');
   $.ajax({
      type: "POST",
      url: url,
      data: $(this).parent('.formi').serialize(),
      success: function(data) {
          digElement.html(data)
      }
   });
   e.preventDefault();
});

Answer 3

尝试使用form提交和$(that).closest('.dig').empty()查找.dig 。在此代码段中.dig 。该代码段阻止了一些Ajax函数调用

将按钮更改为type="submit"

请注意，创建ajax函数是独立的，并使用构造函数之类的new ajax调用。

 $(document).ready(function(){ $("form").on('submit',function(e) { var url = 'http://seller.ir/test'; new ajax($(this)) e.preventDefault(); }); }) function ajax(that){ $.ajax({ type: "POST", url: url, data: $(that).serialize(), success: function(data) { $(that).closest('.dig').empty() }, error:function(jqXHR, textStatus, errorThrown){ console.log(textStatus) } }); } 

 .dig { width: 200px; height: 30px; border: 1px solid #000 } 

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

Answer 4

 $(".done").click(function(e) { var url = 'http://seller.ir/test' $.ajax({ type: "POST", url: url, data: $(this).parents("form").serialize(), success: function(data) { $(this).parents("dig").empty() $(this).parents("dig").html(data) } }); e.preventDefault(); }); 

 .dig { width: 200px; height: 30px; border: 1px solid #000 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> <div class="dig"> <form class="formi"> <button class="done">done</button> </form> </div> 

试试这个！如果不起作用，请发送更新。