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; line應該意味着無論如何，任何對提交功能的調用或點擊“提交”按鈕或點擊輸入意味着我的功能將執行，瀏覽器將不會導航到/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;
});

演示 _沒有錯誤

_帶錯誤的 演示

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

查看一個工作示例 。

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