jQuery提交刷新页面

Question

以下代码旨在执行纯粹的 ajax POST 请求，而不是似乎通过 ajax 执行 POST，然后浏览器导航到响应。

HTML...

<div id="bin">
    <form class="add" method="post" action="/bin/add/">
        <p>I'm interested! Save for later.</p>
        <input type="hidden" name="product_id" value="23423">
        <input type="submit" value="Save">
    </form> 
    <form style="display:none;" class="remove" method="post" action="/bin/remove/">
        <p>I changed my mind--I'm not interested.</p>
        <input type="hidden" name="product_id" value="23423">
        <input type="submit" value="Unsave">
    </form>
</div>

jQuery...

$('#bin form').submit(function() {
                $.post($(this).attr('action'),{
                    success: function(data) { $(this).hide().siblings('form').show() },
                    data: $(this).serialize()

                });
                return false;
            })

据我了解，return false; 行应该意味着无论如何，任何对提交函数的调用或单击“提交”按钮或按回车都意味着我的函数将执行并且浏览器不会导航到/bin/add 或/bin/remove。但是由于某种原因，浏览器 正在更改页面。

知道我在这里做错了什么吗？谢谢。

Answer 1

可能是您的 JavaScript 失败，因此正在执行默认行为。

尝试在 Firebug 等工具中检查 XHR。

另外，您可以尝试event.preventDefault()（其中事件回调的第一个参数是event）。

Answer 2

我敢打赌是因为$(this)，试试这种方式....

$('#bin form').submit(function() {
    var $this = $(this);
    $.post($this.attr('action'), {
        success: function(data) {
            $this.hide().siblings('form').show()
        },
        data: $this.serialize()

    });
    return false;
});

demo _没有错误

demo _出现错误

Answer 3

使用event.preventDefault() 来阻止事件的默认操作。一个好处是您可以将它放在 Ajax 请求之前，这样如果它失败，您仍然会阻止表单提交。

您的代码失败了，因为成功回调中 this 的值是全局 window 对象。你试图隐藏它失败了。您可能希望this 引用该表单，如下所示：

$('#bin form').submit(function(ev) {
    var _this = this;
    ev.preventDefault();
    $.post($(this).attr('action'), {
        success: function() {     
           $(_this).hide().siblings('form').show();
        },
        data: $(this).serialize()
    });
})

查看working example。

Answer 4

$(...).submit(...) 是否在 $(document).ready(function(){ code here }); 内？

应该是这样的：

$(document).ready(function() {
    $('#bin form').submit(function() {
            $.post($(this).attr('action'), {
                success: function(data) { $(this).hide().siblings('form').show(); },
                data: $(this).serialize()
            });
            return false;
        });
});