Javascript - 根据 ajax 响应停止表单提交

IT技术 javascript jquery ajax forms
2021-03-07 02:52:42

我想使用 AJAX 来确定我是否可以接受表单的值(这不是表单验证)。AJAXresult将确定表单是否已提交。

下面,你会看到,当表单提交并根据返回什么我执行一个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
});
2个回答

由于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');
    });
});
@claustrofob - 不,不会。这不会导致提交。
2021-04-18 02:52:42
$("form").off('submit')可以
2021-04-23 02:52:42
@nnnnnn 你是对的。它是一个原生的 DOM 对象。
2021-04-25 02:52:42
@hex494D49 - 发生这种情况是因为 jQuery 事件处理程序对submit事件进行了处理换句话说,当你这样做时,$("form")你最终会进入$("form").submit(function() {...})事件处理程序,它依次尝试再次提交表单,最终在同一个事件处理程序中,这反过来又会再次提交表单,最终在同一个事件处理程序中... 等等。当您调用不是 jQuery 函数native 时 form.submit(),不会触发事件处理程序,并提交表单。
2021-05-01 02:52:42
@adeneo..Super..完美的答案..谢谢..:)
2021-05-08 02:52:42

用于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();
};
现在你有一个范围问题,因为this$.ajax 中的函数调用内部不是表单。
2021-04-23 02:52:42
没办法,再来!使用$(this).submit()只会再次触发相同的事件处理程序。
2021-04-29 02:52:42
这行不通。(提示:“Ajax”中的“A”代表什么?)
2021-04-30 02:52:42
你快完成了。不要放弃!
2021-05-09 02:52:42
我花了这么多时间!我应该去睡觉吗?:D
2021-05-12 02:52:42