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

Posted 2023-05-09

【中文标题】Javascript - 根据ajax响应停止表单提交[重复]

【英文标题】：Javascript - Stop form submit depending on ajax response [duplicate]

【发布时间】：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或以其他方式设法绕过您的提交处理程序。

【参考方案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

你差不多完成了。不要放弃！