Javascript - 根据 ajax 响应停止表单提交 [英] Javascript - Stop form submit depending on ajax response

问题描述

我想使用 AJAX 来确定我是否可以接受表单的值(这不是表单验证).AJAX result 将决定表单是否被提交.

I'm wanting to use AJAX to determine whether or not a form's values are acceptable to me (this is not form validation). The AJAX result will determine if the form is submitted or not.

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

Below, you'll see that I perform an AJAX call when the form is submitted and depending what is returned (either blank which is acceptable, or an error message which is not acceptable), I'd like to return true; or return false; the $("form").submit.

我怀疑我的问题出在 AJAX 的 success: 上.请帮助我从 AJAX 调用中获取 result 以便我可以执行类似 if (result == "") { return true; 之类的操作.} else { 返回假；}.

I suspect my trouble to be in the AJAX's success:. Please help me get the result out of the AJAX call so that I can do something like 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调用是异步的，所以要防止表单提交，然后返回结果时，检查是否符合条件并提交带有原生提交处理程序的表单，避免了 jQuery 事件处理程序中的 preventDefault() :

As the ajax call is asynchronous, you have to prevent the form from submitting, and then when a result is returned, you check if it matches the condition and submit the form with the native submit handler, avoiding the preventDefault() in the jQuery event handler :

$("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');
    });
});

这篇关于Javascript - 根据 ajax 响应停止表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！