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

Question

我无法在不刷新页面的情况下将我的 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();
});

现在，当我点击“提交”时，页面似乎只是刷新，而表单实际上并未提交。

Answer 1

根据注释，确定对 .on() 的调用导致了异常(TypeError: undefined is not a function)，并且您使用 jQuery v1.5.2。

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