javascript - 如何订购运行 ajax 的 jQuery 然后必须返回 true

Question

我有一个非常简单的 javascript 用于检查我的表单字段的表单验证。该函数要么构建一个 errorList 变量并返回 false，要么如果该变量为空，则该函数返回 true 并提交。

我为这个验证函数添加了一个新层。我现在想调用一个外部函数，它只发送一个包含所有表单验证的 Ajax 请求，然后通过电子邮件告诉我用户是否通过了表单验证。

当表单未通过验证时调用此外部函数是可以的，就像我返回 false 时一样；显然表单没有提交，因此允许 ajax 完成。

我只是不知道如何触发外部函数，让它完成，然后返回 true 并让表单提交。它只是跳过 ajax 请求。

有人可以帮忙解释一下逻辑吗？

验证函数:

if (errorList.length > 0) {

    // Log the errors in quote.shared.js:
    logValidationErrors("N/A - Pre Quote", $("#prequote-form"), "productname", errorList);

    $("#error-list").html("");
    $("#error-list").append(errorList);
    $("#error-div").slideDown(500, function() {
        $( '#error-div' ).ScrollTo(300);
    });
    return false;
} else {

    // Log the valid passing through this function in quote.shared.js:
    logValidationErrors("N/A - Pre Quote", $("#prequote-form"), "productname", "none"); 
    return true;
}

ajax函数:

// logValidationErrors
function logValidationErrors(xOrderNumber, xForm, xProduct, xErrors) {
    /*
    alert(xOrderNumber);
    alert(xForm);
    alert(xProduct);
    alert(xErrors);
    */

    $.ajax({
        url:    "log-clientside-events.php?" +
                "type=javascript-errors&" +
                "ordernumber=" + xOrderNumber + "&" +
                "formvalues=" + encodeURIComponent(xForm.serialize()) + "&" +
                "product=" + xProduct + "&" +
                "errors=" +  encodeURIComponent(xErrors),
        context: document.body,
        cache: false,
        timeout: 10000,
        success: function(sHTML){

        },
        error:function (xhr, ajaxOptions, thrownError){
            //window.location.href = window.location.href;
        }
    });


}

Anup 帮助解决了这个问题。关键是创建一个“标志”变量，该变量在 Ajax 第一次运行时为 false，然后在 ajax 完成时将其设置为 true，然后再次提交表单，然后“标志”检查第二次跳过 Ajax 阶段- 并返回 true。

if (errorList.length > 0) {

    // Log the errors in quote.shared.js:
    logValidationErrors("N/A - Customer Details", $("#customer-form"), "productname", errorList);

    $("#error-list").html("");
    $("#error-list").append(errorList);
    $("#customer-login-success-message").slideUp(100);
    $("#error-div").slideDown(500, function() {
        $( '#error-div' ).ScrollTo(300);
    });
} else {

    if (validationSuccessfullyLoggged) {
        return true;

    } else {
        // Log the valid passing through this function in quote.shared.js:
        logValidationErrors("N/A -  Customer Details", $("#customer-form"), "productname", "none"); 

    }
}

return false;

处理ajax的函数:

// logValidationErrors
var validationSuccessfullyLoggged = false;

function logValidationErrors(xOrderNumber, xForm, xProduct, xErrors) {
    /*
    alert(xOrderNumber);
    alert(xForm);
    alert(xProduct);
    alert(xErrors);
    */

    if (xErrors == "none") {
        xErrors = "<li>Form Validated Successfully</li>";   

        submitForm = true;
    } else { 
        submitForm = false;
    }

    $.ajax({
        url:    "log-clientside-events.php?" +
                "type=javascript-errors&" +
                "ordernumber=" + xOrderNumber + "&" +
                "formvalues=" + encodeURIComponent(xForm.serialize()) + "&" +
                "product=" + xProduct + "&" +
                "errors=" +  encodeURIComponent(xErrors),
        context: document.body,
        cache: false,
        timeout: 10000,
        success: function(sHTML){

            //alert(validationSuccessfullyLoggged);

            if (submitForm) { 
                validationSuccessfullyLoggged = true;
                xForm.submit();
            }
        },
        error:function (xhr, ajaxOptions, thrownError){
            //window.location.href = window.location.href;
        }
    });


}

Answer 1

问题的一般原因是当您发出 AJAX 请求时，它是异步的(AJAX 中的第一个“a”)。因此，在您调用 logValidationErrors 函数后，返回 true 会在 ajax 操作返回之前运行。

为了解决这个问题，我可以想到两种通用方法(尽管可能还有其他我没有想到的方法):

1) 在 jQuery 的 ajax 方法中，您可以将 async 设置为 false(因此它不再是异步的)。有关详细信息，请参阅他们的文档:http://api.jquery.com/jQuery.ajax/

我个人不推荐这样做，除非是在非常特殊的情况下(而且我认为你的例子对我来说不合格)，因为你会锁定浏览器一段时间，并且会破坏异步请求的目的。

2) 一种替代方法是您始终从主 JavaScript 代码中返回 false。换句话说，在调用 logValidationErrors 函数之后，也返回 false(或者在 if/else block 之后只有一个 return false 语句。然后，当 ajax 操作实际完成时，在成功处理程序中你想触发你的成功场景(例如提交表单)，并且在错误场景中(请参阅 jQuery ajax 文档中的错误选项)，您可能想要调用您的错误场景。

没有看到您的更多代码并且当您调用您发布的特定 if/else 示例时，我不能更精确，可能有更优雅的方法来处理这个问题。根据您要执行的操作，可能还需要牢记其他注意事项。例如，如果提交您的表单只是要调用相同的 if/else block ，您可能需要一个跟踪变量来指示您已经发出初始 ajax 请求，以便这次您可以继续并在需要时提交。

希望对您有所帮助。