使用 jQuery/AJAX 提交表单，提交时无法阻止页面刷新？答案

【问题标题】：submitting form with jQuery/AJAX, cant stop page from refreshing on submit?使用 jQuery/AJAX 提交表单，提交时无法阻止页面刷新？
【发布时间】：2014-04-28 15:39:05
【问题描述】：

在不刷新页面的情况下，我无法将 AJAX 表单转换为 POST 到我的 PHP 脚本。

我在 AJAX 请求之前和之后都添加了e.preventDefault()，但它似乎没有任何影响，这似乎很奇怪。

这是我的 javascript：

// AJAX form submit
$("form[name=signoutRequestForm]").on("submit", function(e){

    var cval = confirm.val().toLowerCase().replace(" ", "");
    if( cval !== "yes"  ) {
        alert("You must accept the borrowing policy.");
    }else{
        var formData = {
            validForm: true,
            name_txt: name.val(),
            productName_sel: prodName.val(),
            signoutDateStart_txt: startDate.val(),
            signoutDateEnd_txt: returnDate.val(),
            additionalNotes_txtarea: addNotes.val(),
            disclaimer_txt: confirm.val(),
            recaptcha_challenge_field: recap_challenge.val(),
            recaptcha_response_field: recap_response.val(),
            studentUse: studentUse.val()
        };

        $.ajax({
            type: "POST",
            ulr: confLocation,
            data: formData,
            done: function(data){
                $(".signoutRequestForm").remove();
                $(".signout-form-container").html( data );
            }
        });
    }
    e.preventDefault();
});

现在，当我点击提交时，页面似乎只是刷新，而没有实际提交表单。

【问题讨论】：

代替.on("submit",..)试试.on("click",..)
@AmitSoni 不起作用，这是一个表单而不是按钮。
您是否收到 javascript 错误？如果出现错误，javascript 将无法阻止表单被提交。你检查过你的控制台吗？
@PankajSharma 是对的，它应该是“成功”或最后链接的.done()
您确定要包含 jQuery 吗？如果是这样，您包括哪个版本？

标签： javascript jquery ajax forms

【解决方案1】：

从 cmets 确定对 .on() 的调用导致异常 (TypeError: undefined is not a function) 并且您使用的是 jQuery v1.5.2。

.on() 直到版本 1.7 才添加。对于旧版本，应使用.bind()。

【讨论】：

【解决方案2】：

只需使用return false

    .....
    e.preventDefault();
    return false
});

【讨论】：

有意思，为什么需要return false？我认为 e.preventDefault() 是防止表单默认行为所需要的全部。
为什么会有不同？
@Prefix 是肯定的。那我不知道为什么这个答案被赞成了？！

【解决方案3】：

使用return false; 而不是e.preventDefault()

【讨论】：

为什么 e.preventDefault() 不起作用？我认为这就是它的用途。
return false 在现代浏览器中已弃用
为什么会有不同？
@da_berni 那么，有什么参考吗？怎么可能被“弃用”？！编辑：但无论如何，这个答案不会解决 OP 的问题
@A.Wolff，据我所知，它在 jQuery 中已经或将被弃用。 jQuery 必须手动检查函数是否返回 false，然后停止传播并防止默认，但他们正在检查。