如何訂購此jQuery運行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; 

功能，與阿賈克斯涉及：

// 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）。因此，在調用logValidationErrors函數後，返回true將在ajax操作返回之前運行。

爲了解決這個問題，有我能想到的（雖然可能有其他人我沒有想到的）2種通用的方法：

1）在jQuery的AJAX方法，你可以異步設置爲false（所以它不再是異步的）。查看他們的文檔的詳細信息：http://api.jquery.com/jQuery.ajax/

我個人不會推薦這個，除非它是在非常特殊的情況下（我認爲你的例子不符合我的要求），因爲你鎖定瀏覽器一段時間，並打敗異步請求的目的。

2）另一種方式是，你總是會從你的主JavaScript代碼返回false。換句話說，調用logValidationErrors功能後，返回false以及（或者只是之後有一個返回虛假陳述你的if/else塊。然後，當AJAX操作實際上已經完成，在成功處理程序要觸發成功場景（例如提交表單），並且在錯誤情況下（請參閱jQuery ajax文檔中的錯誤選項），您可能想要調用您的錯誤場景。如果/其他樣品你貼，我不能更準確，它可能是有處理這更優雅的方式，而且可能還有其他因素加以考慮過這取決於你想要做什麼樣的行動來承擔。例如，如果提交表單只是調用相同的if/else代碼塊，則可能需要一個跟蹤變量來表明您已經創建了初始ajax請求，以便您可以根據需要進行提交併提交。

希望有所幫助。

Answer 2

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

刪除「return true;」從上面的代碼，當你需要從一個ajax返回的財產以後，通常必須在裏面成功的功能做......所以

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