如何在ajax请求未完成时停止编译器？

Question

我有一个表单，在这个字段中，有一个父关键字作为秘密密钥。 当我使用javascript验证此表单时，效果很好。 我还会检查与任何父母关联的秘密密钥。 如果不是，则将galg设置为0。Ajax正常运行，它还会检查是否找到了该秘密密钥。 如果找到，则正确与否， 但是编译器不等待ajax完成。 它提交表单，而不必等待ajax响应。 我想在ajax请求未完成的情况下恢复一段时间，然后再检查其他字段。

function PiggyBankValidation()
{
    var flag = 1;
    var Namepattern     = /^[a-zA-Z0-9 ]{1,40}$/; 
    var account_name    = $("#account_name");
    var holding_terms   = $("#holding_terms");
    var goal            = $("#goal");
    var parent_keywords = $("#parent_keywords");
    var terms           = $("#terms");

    //terms.attr("checked",false)
    if(account_name.val().trim() == ""){
        account_name.next('.JErrorMsg').text("Please Enter Account Name !");
        flag = 0;
    }else if(Namepattern.test(account_name.val().trim()) == false){
        account_name.next('.JErrorMsg').text("Please Enter Correct Account Name !");
        flag = 0;
    }else{
        account_name.next('.JErrorMsg').text("");
    }
    if(holding_terms.val().trim() == ""){
        holding_terms.next('.JErrorMsg').text("Please Select Holding Terms !");
        flag = 0;
    }else if(Namepattern.test(holding_terms.val().trim()) == false){
        holding_terms.next('.JErrorMsg').text("Please Select Holding Terms !");
        flag = 0;
    }else{
        holding_terms.next('.JErrorMsg').text("");
    }

    if(goal.val().trim() == ""){
        goal.next('.JErrorMsg').text("Please Enter Goal !");
        flag = 0;
    }else if(Namepattern.test(goal.val().trim()) == false){
        goal.next('.JErrorMsg').text("Please Enter Correct Goal !");
        flag = 0;
    }else{
        goal.next('.JErrorMsg').text("");
    }

    if(parent_keywords.val().trim() == ""){
        parent_keywords.next('.JErrorMsg').text("Please Enter Parent Keywords !");
        flag = 0;
    }else if(Namepattern.test(parent_keywords.val().trim()) == false){
        parent_keywords.next('.JErrorMsg').text("Please Enter Correct Parent Keywords !");
        flag = 0;
    }else{
        parent_keywords.next('.JErrorMsg').text("Please wait...");
        $.ajax({
            url:siteurl+"ChildControlPanel/CheckSecretKey",
            type: "POST",
            data:{key:parent_keywords.val().trim()},
            beforesend : function(){flag = 0;},
            success : function(data){
                if(data){
                    response = JSON.parse(data);
                    if(response.success){
                        parent_keywords.next('.JErrorMsg').text("");
                    }
                    if(response.error){
                        parent_keywords.next('.JErrorMsg').text(response.error);
                        flag = 0;
                    }
                }else{
                    parent_keywords.next('.JErrorMsg').text("Please try again !");
                    flag = 0;
                }
            },
        });

    }
    if(terms.prop("checked") == false){
        terms.next('.JErrorMsg').text("Please Accept terms !");
        flag = 0;
    }
    else
    {
        terms.next('.JErrorMsg').text("");
    }
    ///alert(flag);
    if(flag == 1)
    {
        alert("submit");
        //return  true;
        return false;
    }
    else
    {
        return false;
    }
}

我在这里调用此功能

$(document).ready(function(){
    $("#piggyBankSetup input").keypress(function(e){
            if(e.keyCode == 13){
                if(PiggyBankValidation()){
                    document.piggyBankSetup.submit();
                }
            }
        });
    $("#AddAccount").click(function(){
        if(PiggyBankValidation()){
            document.piggyBankSetup.submit();
        }
    });
});

当此函数调用且所有字段都具有正确的值时，只有父关键字（秘密密钥）是错误的，然后提交表单。

Answer 1

尝试

在$ .ajax请求集内'async'：false，这将使请求等待完成，否则您可以在验证函数外部设置ajax请求并通过添加一些类来检查是否有效（使用jQuery.hasClass（'class name'）检查）控制或设置全局变量

Answer 2

Ajax是异步的。 这就是Ajax中的“ A”所代表的意思。 由于某种原因它也是异步的，因为它可以使浏览器在网络请求期间保持响应状态，这可能需要花费几秒钟的时间。 您可能需要阅读以下参考资料：

如何从异步调用返回响应？

因此，您需要阻止表单的默认提交（可能使用event.preventDefault()但您不会向我们显示将要输入的代码）。 并且，当验证通过时，您可以以编程方式提交表单。

您还需要更正代码以使用异步响应。 所有使用Ajax响应的代码都必须位于成功处理程序中或从成功处理程序中调用。 您不能在那里设置标志，然后在成功处理程序之外使用该标志。 计时将无法正常工作。

如果您需要以某种方式执行多个操作作为验证的一部分，那么您将必须编写可以处理多个操作的异步代码。 这是学习如何编写正确的异步代码的所有部分，并且是进行良好的javascript开发所必需的。 您不能从PiggyBankValidation()函数返回异步结果，因为当PiggyBankValidation返回时，异步结果将不可用。

如果您有多个异步操作，则可以使用回调或Promise来帮助构建异步代码。 如果只有一个异步操作，则只需将所有其他代码放入成功处理程序（或从成功处理程序调用的回调中）。