如何使这个jQuery tha运行ajax，然后必须返回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;
        }
    });


}

阿努普帮助解决了问题。关键是创建第一次运行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方法中，可以将异步设置为false (因此它不再是异步的)。有关详细信息，请参阅其文档：http://api.jquery.com/jQuery.ajax/

我个人不建议这样做，除非是在非常特殊的情况下(对于我来说，我不认为您的示例符合条件)，因为您会锁定浏览器一段时间，从而达到异步请求的目的。

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

如果您没有看到更多的代码，并且在调用您发布的特定if/ you示例时，我不能更精确，而且可能有更优雅的方法来处理这个问题。根据你想要做的事情，你可能还需要记住其他一些考虑因素。例如，如果提交表单只是要调用相同的if / can块，则可能需要一个跟踪变量来指示您已经发出了最初的ajax请求，因此这一次您可以继续并在需要时提交。

希望这能有所帮助。

Answer 2

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

从上面的代码中删除“返回真”，当您需要从ajax返回某些内容时，通常您必须在内部成功函数中这样做.所以

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