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)是提交按钮，而不是jQuery处理程序中的表单... this是处理程序附加到的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是您提交的按钮的类名。

jQuery preventDefault停止序列化和后续的ajax调用

2 个答案: