等待ajax响应相同的功能

Waiting for ajax response same function

本文关键字：功能 ajax 响应 等待      更新时间：2023-09-26

我知道类似的问题已经发布了很多次，但我读了很多遍，找不到问题的答案。

我有一个等待ajax请求响应的函数。你们中的许多人会问为什么？好吧，我使用的是一个Wizard Jquery插件，当一个步骤剩下时，它会执行一个函数onLeaveAStepFunction，如果onLeaveAStepFunction的返回值为true，则向导会转到所选的步骤；否则它将保持不变。

我做这个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())
    }
});

省略属性。请帮帮我。

您可以使用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/

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

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

考虑切换到另一个向导，不要忘记为您当前使用的插件提交一个bug。

一个棘手的解决方案是在离开Step之前完成。也许在展示步骤：

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的理解。你肯定需要修改我的例子，使其发挥作用。

相关文章：