Javascript - 根据ajax响应停止表单提交[重复]答案

【问题标题】：Javascript - Stop form submit depending on ajax response [duplicate]Javascript - 根据ajax响应停止表单提交[重复]
【发布时间】：2013-06-10 10:32:37
【问题描述】：

我想使用 AJAX 来确定我是否可以接受表单的值（这不是表单验证）。 AJAX result 将确定表单是否提交。

下面，您将看到我在提交表单时执行 AJAX 调用，具体取决于返回的内容（可接受的空白或不可接受的错误消息），我想 return true;或return false;$("form").submit。

我怀疑我的问题出在 AJAX 的 success: 上。请帮助我将 result 从 AJAX 调用中取出，以便我可以执行 if (result == "") { return true; } else { return false; } 之类的操作。

工作：

$("form").submit(function(e) {
    e.preventDefault();
    var form = this;
    var tray = $('select[name=tray_id]').val();
    $.ajax({
        type: "POST",
        url: "modules/reserve-check.php",
        data: {tray_id: tray},
        cache: false
    }).done(function(result) {
        if (result == "")
            form.submit();
        else
            alert(result);
    }).fail(function() {
        alert('ERROR');
    });
});

原文：

$("form").submit(function() {
    var tray = $('select[name=tray_id]').val();
    $.ajax({
        type: "POST",
        url: "modules/reserve-check.php",
        data: {tray_id: tray},
        cache: false,
        success: function(result) {
                alert(result);
        },
        error: function(result) {
            alert(result); //This works as expected (blank if acceptable and error msg if not acceptable)
        }
    });

    /*
    if (result == "")
        return true; 
    else
        return false; 
    */
    return false; //this is here for debugging, just to stop the form submission
});

【问题讨论】：

为什么不通过 AJAX 调用将整个表单提交给服务器，让服务器决定什么是可接受的。然后你可以让服务器返回一个成功或错误代码，你可以采取相应的行动
只能从同步代码中返回，Ajax 是异步的。阅读上面的帖子并使用回调。
更进一步 Mike W 所说，如果你确实通过 Ajax 进行了提交前的可接受性测试，你真的需要在你提交的 PHP 代码中重复测试，以防用户禁用了 JS或以其他方式设法绕过您的提交处理程序。

标签： javascript jquery ajax forms

【解决方案1】：

由于 ajax 调用是异步的，所以你必须阻止表单提交，然后当返回结果时，你检查它是否符合条件并使用原生提交处理程序提交表单，避免 preventDefault() 中的jQuery 事件处理程序：

$("form").submit(function(e) {
    e.preventDefault();

    var self = this,
        tray = $('select[name=tray_id]').val();

    $.ajax({
        type: "POST",
        url: "modules/reserve-check.php",
        data: {tray_id: tray},
        cache: false
    }).done(function(result) {
        if (result == "") self.submit();
    }).fail(function() {
        alert('error');
    });
});

【讨论】：

还有$("form").off('submit')也可以
@claustrofob - 不，不会。这不会导致提交。
@nnnnnn 你是对的。它是一个原生 DOM 对象。
@adeneo..Super..完美答案..谢谢..:)
@hex494D49 - 这是因为 jQuery 事件处理程序包含 submit 事件。换句话说，当您执行$("form") 时，您最终会进入$("form").submit(function() {...}) 事件处理程序，该事件处理程序又会尝试再次提交表单，最终会进入相同的事件处理程序，这反过来又会再次提交表单，结束在同一个事件处理程序中......等等。当你调用 native form.submit()，它不是 jQuery 函数时，不会触发事件处理程序，而是提交表单。

【解决方案2】：

使用e.preventDefault();阻止表单提交，然后使用this.submit()（不是调用jQuery的.submit()触发函数，而是调用原生的<form> .submit()函数）提交表单。

$("form").submit(function(e) {
            e.preventDefault();
            var tray = $('select[name=tray_id]').val();
            var form = this;
            $.ajax({
                type: "POST",
                url: "modules/reserve-check.php",
                data: {tray_id: tray},
                cache: false,
                complete : function(result){callback(result, form)}
            });       
        });

var callback = function(result, form){
  if(!result)
    form.submit();
};

【讨论】：

这行不通。（提示：“Ajax”中的“A”代表什么？）
不行，再来一次！使用$(this).submit() 只会再次触发相同的事件处理程序。
现在你有一个范围问题，因为 $.ajax 中的函数调用中的this 不是表单。
我花了这么长时间！我应该去睡觉吗？ :D
你差不多完成了。不要放弃！