Javascript 不等待使用 bootstrap-wizard.js 的 ajax

Question

我有一个bootstrap-wizard如下:

<div class="wizard-card" data-cardname="credential">
            <h3>Credential</h3>
            <div class="wizard-input-section">
                <p>Username</p>
                <div class="form-group">
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="Busername" name="Busername" placeholder="Username" required data-parsley-type="alphanum" data-validate="checkNameAvailable" data-msg="Alphanumeric allowed only" />
                    </div>
                </div>
                <p>Password</p>
                <div class="form-group">
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="Bpassword" name="Bpassword" placeholder="Password" />
                    </div>
                </div>
                <p>Re-type Password</p>
                <div class="form-group">
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="Bpassowrd2" name="Bpassword2" placeholder="Retype Password"/>
                    </div>
                </div>
            </div>
        </div>

输入<input type="text" class="form-control" id="Busername" name="Busername" placeholder="Username" required data-parsley-type="alphanum" data-validate="checkNameAvailable" data-msg="Alphanumeric allowed only" />调用checkNameAvailable函数进行验证。

检查NameAvailable函数:它会调用 ajax 来检查该名称是否可用。

function checkNameAvailable(el){
        if($("#"+$(el).attr('id')).parsley().isValid()){
            var data =  $(el).val();
            if($(el).attr('id') == "Busername"){
                var type = "B";
            }else{
                var type = "I";
            }
            $.ajax({
                  method: "POST",
                  url: "isUserAvailableCommon",
                  async: false,
                  data: {Busername: data, _token: $("#_token").val(), _type: type },
                    success: function(msg) {
                        var retValue = {};
                        if(msg == "OK"){
                            retValue.status = true;
                            console.log(retValue);
                            return retValue;
                        }else{
                            retValue.status = false;
                            console.log(retValue);
                            return retValue;
                        }
                    }

             });
    }
}

问题在于变量retValue不会返回到 Bootstrap 向导验证。

但是，如果我这样尝试，它会起作用，但在使用 ajax 实现时则不起作用

function checkNameAvailable(el){
  var retValue = {};
  retValue.status = false;
  return retValue;
}

知道如何让它与ajax一起工作吗？我已经尝试过 Javascript function not waiting for AJAX response 中描述的回调和方法但仍然无法正常工作。

Answer 1

您可以尝试像这样更改您的功能:

function checkNameAvailable(el){
        var dfd = $.Deferred();

        if($("#"+$(el).attr('id')).parsley().isValid()){
            var data =  $(el).val();
            if($(el).attr('id') == "Busername"){
                var type = "B";
            }else{
                var type = "I";
            }

            $.ajax({
                  method: "POST",
                  url: "isUserAvailableCommon",
                  data: {Busername: data, _token: $("#_token").val(), _type: type },
                    success: function(msg) {
                        var retValue = {};
                        if(msg == "OK"){
                            retValue.status = true;
                            console.log(retValue);
                            dfd.resolve(retValue);
                        }else{
                            retValue.status = false;
                            console.log(retValue);
                            dfd.resolve(retValue);
                        }
                    }

             });
    }

    return dfd.promise();
}

// after this you can use 
// checkNameAvailable in this 
// way. 

checkNameAvailable(el).done(function(retValue) {
    console.log(retValue);
});

阅读我的评论和函数使用示例。当我们使用 Promise 时该代码可以是异步的。你不能 async: false - 这不是非常好的主意。

编辑:同步ajax请求不是一个好主意，但现有代码基本期望同步函数，所以你的函数必须是改成这样:

function checkNameAvailable(el) {
    var result;

    if ($("#" + $(el).attr('id')).parsley().isValid()) {
        var data = $(el).val();
        if ($(el).attr('id') == "Busername") {
            var type = "B";
        } else {
            var type = "I";
        }
        $.ajax({
            method: "POST",
            url: "isUserAvailableCommon",
            async: false,
            data: {
                Busername: data,
                _token: $("#_token").val(),
                _type: type
            },
            success: function(msg) {
                var retValue = {};
                if (msg == "OK") {
                    retValue.status = true;
                    console.log(retValue);
                    result = retValue;
                } else {
                    retValue.status = false;
                    console.log(retValue);
                    result = retValue;
                }
            }

        });
    }

    return result;
}

祝你好运。

编辑2:

我已经 fork 了项目存储库并添加了如何使用的示例异步进入验证器函数。这个解决方案有点脏hack 但比使用同步逻辑要好得多。

https://github.com/gonaumov/bootstrap-application-wizard/blob/master/demo/demoAsynchronousValidator.html

我还针对此更改提出了拉取请求。