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>

The 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。但出于某种原因，浏览器仍然在更改页面。

你有什么想法吗？谢谢。

- Chris W.

Answer 1

可能是因为您的JavaScript出现了问题，所以执行了默认行为。

尝试使用类似Firebug的工具检查XHR。

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

- alex

---

哎呀，看来你是正确的，我的 JavaScript 代码出现了错误，导致它崩溃并允许默认操作（也就是离开页面）发生。我在 Firebug 中从未看到过它，因为页面已经改变了。通过使用 event.preventDefault()，我现在能够在 Firebug 中检查错误了。谢谢！ - Chris W.

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;
});

演示 _无错误

演示 _有错误

- Reigel Gallarde

---

我太慢了 :) 我需要学会偶尔点击编辑窗口以外的区域。 - Wayne

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()
    });
})

查看一个工作示例。

- Wayne

---

$(this).attr('action') 这部分... :) - Reigel Gallarde

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;
        });
});

- John Boker

---

抱歉，我应该明确说明我已经将它放在了$(document).ready函数中。 - Chris W.