Question

为什么event.preventDefault();在这个AJAX设置中不起作用？

$( "#formID" ).submit(function( event ) {
    $.ajax({
        url: "ajax.php",
        type: "GET",
        data: { 'data': 'anything' },
        dataType: "json"
    })
    .done(function( json ) {
        if (!json.result) { 
            event.preventDefault();
        }
    });
});

更新

提交表单我想通过Ajax检查条件是真还是假。取决于应该阻止提交（如果AJAX调用的结果为假）。

这可能吗？

Answer 1

由于ajax是异步的，因此表单将在ajax完成之前提交

$("#formID").submit(function (event) {
    //prevent the form submit by default
    event.preventDefault();
    var form = this;
    $.ajax({
        url: "ajax.php",
        type: "GET",
        data: {
            'data': 'anything'
        },
        dataType: "json"
    })
        .done(function (json) {
        if (json.result) {
            //if ajax is success submit the form
            form.submit()
        }
    });
});

Answer 2

使用return false;来阻止默认提交。如果要等待数据返回，请使用async: false

$( "#formID" ).submit(function( event ) {
    $.ajax({
        url: "ajax.php",
        type: "GET",
        data: { 'data': 'anything' },
        dataType: "json",
        async: false
    })
    .done(function( json ) {
        if (!json.result) { 
            event.preventDefault();
        }
    });
   return false;
});

Answer 3

event.preventDefault会在表单提交之前阻止任何指定的事件。在你的情况下，你在Ajax调用的回调函数中调用preventDefault，这是一个异步调用，你的表单将在回调函数执行之前被提交。所以你把它放在哪里都没有任何意义。

将其置于Ajax调用之外（在ajax调用之前），如下所示，

$( "#formID" ).submit(function( event ) {
    event.preventDefault();
    $.ajax({
        url: "ajax.php",
        type: "GET",
        data: { 'data': 'anything' },
        dataType: "json"
    })
.
.

如果您的结果满意，请在ajax回调方法中调用表单提交。

.done(function( json ) {
        if (json.result) { 
            // Do form submit here.
        }
    });

AJAX中的preventDefault（）不起作用

3 个答案: