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。此代码段无效.Snippet阻止了一些ajax函数调用

将按钮更改为type="submit"

注意创建ajax函数是独立的，并使用类似构造函数的new ajax进行调用。它不会打扰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>

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

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

4 个答案: