Question

我知道这可能已被问过一百万次，但对于我的生活，我无法得到任何工作。

我有一个UI向导控件，在“已更改”事件上验证模型。如果模型无效，则不允许用户在向导中向前移动。我已经厌倦了在jquery中使用$ .when（）。done（）功能，但是在确保模型有效之前我的代码仍然通过。调用异步ajax请求的原因是我不希望UI锁定，所以我可以显示某种进度指示器。我已将async属性设置为false，但我的UI指示器永远不会显示。这是我的代码正在做的一个例子：

//the change event that is called when the user clicks 'next' on the wizard:

wizard.on('change', function (e, data) {
      var isValid =  $.validate({
                            "Model": [The_UI_MODEL],
                            "Url": [URL_To_Server_Validation],
                            "Async": true, //tells ajax request to send as async
                        });
      //Tells the wizard not to move 'next' if the request comes back as not valid
      if (data.direction === 'next' && !isValid) {

           e.preventDefault();
        }
}

//我正在使用$ .extend方法为JQuery创建一个函数来验证我系统中的任何模型。

validate: function(options) {

            //Clear any previous validation errors
            $.clearValidations();

            var data = $.postJson(options);

            //the result is getting returned before the $.postJson(options) finishes
            return data.Success; 
        }

//我创建了自己的方法来扩展$ .ajax方法，这样我就可以在请求之前/之后做其他事情：

postJson: function(options){
...other code for my application
//This is where I want the ajax request to happen and once done return the data coming back
//This is what I have tried, but it is not doing what I thought.

$.when(function(){
      return $.ajax({
                url: options.Url,
                type: 'POST',
                cache: false,
                async: options.Async,
                timeout: options.Timeout,
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                data: JSON.stringify(options.Model),
                error: function(xhr, status, error) {
                   ...do stuff if ajax errors out
                },
                success: function (data) {

                },


           });

}).done(function(response){
       //looks like i get back the responseText of the request. which is fine, but other posts i have read stated i should be getting back the request itself
...other UI stuff
return response;
})



}

Answer 1

KarelG绝对正确。您需要重构代码并在ajax请求的成功回调中进行验证检查。

像这样......

wizard.on('change', function (e, data) {

    $.ajax({
        url: [URL_To_Server_Validation],
        type: 'POST',
        cache: false,
        async: true,
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: {"Model": [The_UI_MODEL]},
        success: function (response) {

            //Tells the wizard not to move 'next' if the request comes back as not valid
            if(!response & data.direction === 'next')
            {
                e.preventDefault();
            }

        }

    });


});

Answer 2

看起来您正在尝试编写异步代码，就好像它是同步的一样。诸如$ .validate（）之类的异步调用将立即返回而没有结果，并继续执行其余代码。验证调用完成后您想要发生的任何事情必须在传递给它的回调函数中完成。

您可以使用jQuery promises（当时，完成等）或其他库（例如async.js）来帮助管理控制流程。

此外，现在这并不是特别有用，因为它几乎没有浏览器支持，但yield运算符加上Task.js这样的库最终会让我们编写异步代码，就好像它是同步的。

在转移到其他代码之前等待Async ajax完成？

2 个答案: