Question

我知道类似的问题已经多次发布，但是我已经阅读了很多这些问题但无法找到问题的答案。

我有一个等待ajax请求响应的函数。很多人会问为什么？好吧，我使用了一个向导Jquery插件，当一个步骤离开时执行一个函数onLeaveAStepFunction，如果来自onLeaveAStepFunction的返回值为真，则向导将转到所选步骤;否则它仍然保持同一步。

我正在做这个 async: false 等待并且它有效，但这是一个糟糕的设计。另外，我无法使用blockUI插件。

我该怎么做？

一些代码：

初始化向导：

$("#wizard").smartWizard({
        onLeaveStep : onLeaveStepFunction,
    });

调用ajax请求：

function onLeaveStepCallback(obj, context) {
    nextStep = sendForm();
}

ajax请求：

var nextStep = false;
$.ajax({
    url : path,
    type : "POST",
    async : false,
    data : $("#" + idForm).serialize(),
    success : function(data) {
        $("#" + idDiv).html(data);
        nextStep = !$("#" + idHiddenErrores).val())
    }
});

省略属性。请帮帮我。

Answer 1

您可以使用jQuery等待方法。我从文档页面中举了一个例子来强调你是如何做到的：

$.when( $.ajax( "/request.php" ) ).done(function( response ) {
        // response argument resolved from ajax requests
        // process any work after ajax call finishes
}

指向文档页面的链接：

http://api.jquery.com/jquery.when/

Answer 2

我正在做这个异步：假等待它有效，但这是一个糟糕的设计，我也不能使用blockUI插件。

除非您的向导设计得更好并且支持异步回调（例如，承诺返回的回调），否则async:false是您唯一的选择。

考虑切换到其他向导，不要忘记为您当前使用的插件提交错误。

Answer 3

一个hackish work-around是在leaveStep之前完成的。也许在showStep上：

var wizard_next_step;
$("#wizard").smartWizard({
    onShowStep : function (obj, context) {
        onLeaveStepFunction(obj, context, function(nextStep){
            wizard_next_step = nextStep;
        });
    },
    onLeaveStep : function () {
        return wizard_next_step;
    }
});

您还需要修改onLeaveStepFunction以接受回调：

function onLeaveStepCallback(obj, context, callback) {
    nextStep = sendForm(callback);
}

然后你的ajax函数应该是：

$.ajax({
    url : path,
    type : "POST",
    async : false,
    data : $("#" + idForm).serialize(),
    success : function(data) {
        $("#" + idDiv).html(data);
        callback( !$("#" + idHiddenErrores).val()) );
    }
});

现在，看起来您正在使用以下内容进入向导窗口：

$("#" + idDiv).html(data);

我完全相信是否是这种情况。但如果是，那么你不能在这里做到这一点（显然因为它会覆盖当前内容onShowStep）。如果是这样，你应该在回调中传递数据：

success : function(data) {
    callback( data , !$("#" + idHiddenErrores).val()) );
}

像这样编写向导：

var wizard_next_step;
var wizard_data;
$("#wizard").smartWizard({
    onShowStep : function (obj, context) {
        onLeaveStepFunction(obj, context, function(data, nextStep){
            wizard_data = data;
            wizard_next_step = nextStep;
        });
    },
    onLeaveStep : function (obj, context) {
        $("#" + idDiv).html(wizard_data);
        return wizard_next_step;
    }
});

关键是在调用所有同步函数之前调用所有异步函数并获取数据。

注意：我根本不懂智能向导，也不认识严重的jQuery用户。上面的答案基于我在github上阅读智能向导文档的2分钟以及我对javascript的理解。您肯定需要修改我的示例才能使其正常工作。

等待ajax响应相同的功能

3 个答案: