jQuery preventDefault停止序列化和随后的Ajax调用

Question

我有一个PHP页面上有多个表单，我希望jQuery能够在点击提交后（不刷新页面）隐藏每个表单。每次创建php页面时，表单的id都是动态生成和唯一的。

如果我不使用preventDefault，那么下面的脚本提交数据，但刷新页面（我不想）。如果我使用preventDefault，表单仍然提交，但没有数据（serialize似乎不起作用）。

<script> 
$(document).ready(function() { 
    $(".connection").click(function(e) { 
     e.preventDefault(); 
     var data = $(this).serialize(); 
     var element = $(this); 
     var connectid = element.attr("id"); 
     $.ajax({ 
      url: "/beta/membersarea.php", 
      type: "POST", 
      cache: false, 
      data: data, 
      success: function(data) { 
       $("#connected_" + connectid).hide(); 
      } 
     }); 
    }); 
});​ 
</script> 

Answer 1

$(this)在你的代码提交按钮，而不是形式... this在jQuery的处理程序是的DOM元素，处理程序连接到。从这个

变化：

$(".connection").click 

要这样：

$("form").submit(function(e) { 

全码：

$(document).ready(function() { 
    $("form").submit(function(e) { 
     e.preventDefault(); 
     var $element = $(this); 
     var data = $element.serialize(); 
     $.ajax({ 
      url: "/beta/membersarea.php", 
      type: "POST", 
      cache: false, 
      data: data, 
      success: function(data) { 
       $element.hide(); 
      } 
     }); 
    }); 
});​ 

Answer 2

的preventDefault是防止默认动作是正常的形式提交在这种情况下。我想你的问题是你没有序列化正确的元素（形式）。试试

$(this)表示当前项目。当您在提交按钮中单击访问$（this）时，它将引用表单中的提交按钮元素。不是持有提交按钮的表单。

$(document).ready(function() { 
    $(".connection").click(function(e) { 
     e.preventDefault(); 
     var data = $("form").serialize(); 
     var element = $(this); 
     var connectid = element.attr("id"); 
     $.ajax({ 
      url: "/beta/membersarea.php", 
      type: "POST", 
      cache: false, 
      data: data, 
       success: function(data) 
       { 
       $("#connected_"+connectid).hide(); 
       } 
       }); 
     });  
}); 

假设connection是您的提交按钮的类名称。