如何在同一頁面上使用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> 

試試這個！如果不起作用，請發送更新。