如何排序这个jQuery tha运行ajax然后必须返回true

How to order this jQuery tha runs ajax then must return true

本文关键字:然后 ajax 运行 true 返回 tha jQuery 何排序 排序      更新时间:2023-09-26

我有一个非常简单的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帮助解决了这个问题。关键是创建一个"flag"变量,该变量在Ajax第一次运行时为false,然后在ajax完成时设置为true,然后再次提交表单,然后"flag"检查第二次跳过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;
        }
    });

}

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

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

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

我个人不建议这样做,除非是在非常特殊的情况下(我认为你的例子对我来说不符合条件(,因为你锁定浏览器一段时间,并破坏了异步请求的目的。

2(一种选择是你总是从你的主JavaScript代码中返回false。换句话说,在调用 logValidationErrors 函数后,也返回 false(或者在 if/else 块之后只有一个返回 false 语句。然后,当 ajax 操作实际完成时,在成功处理程序中,您希望触发成功场景(例如提交表单(,而在错误场景中(请参阅 jQuery ajax 文档中的错误选项(,您可能希望调用错误场景。

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

希望有帮助。

logValidationErrors("N/A - Pre Quote", $("#prequote-form"), "productname", "none");
return true;

从上面的代码中删除"return true;",当你需要从ajax返回一些东西时,你通常必须在SUCCESS函数中做...所以

success: function(data)
{ 
    doSomething;
    return true; 
}