Question

我试图在ASP.NET中使用Ajax提交表单，一切正常但我无法使用e.preventdefault（）方法阻止默认表单提交。

这是我的jquery ajax提交代码：

 $('#submitBtn').on('click', function () {
    $('#addNewContact').submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function (message) {
                console.log(message);
            },
            error: function (message) {
                console.log(message);
            }

        })


    })
})

Answer 1

如果e.preventDefault()不起作用，您可以在函数末尾编写 - return false; - 语句，该语句执行您所需的功能并阻止默认表单提交。

Answer 2

如果您的表单带有ID addNewContact和提交按钮，那么您可以使用以下内容进行注册：

$('#addNewContact').submit(function (e) {

    e.preventDefault();

    $.ajax({
        // ...
    });

});

在您的代码中，您使用了$(this).attr('action')，这意味着您尝试使用表单提交事件，但是您在代码中做错了。你做的是：

$('#submitBtn').on('click', function () { // Click handler registered

    $('#addNewContact').submit(function (e) { // Submit handler registered

        e.preventDefault();

        $.ajax({
            // ...
        });

    });
});

因此，您的代码应如下所示（表单提交事件）：

$('#addNewContact').submit(function (e) {

    e.preventDefault();

    $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        data: $(this).serialize(),
        dataType: 'json',
        success: function (message) {
            console.log(message);
        },
        error: function (message) {
            console.log(message);
        }
    });

});

使用Ajax在MVC中提交表单。无法阻止默认表单提交

2 个答案: