jQuery AJAX：收集多个异步结果

我正在对表单数据进行验证,这样当有人点击提交按钮时,它会首先检查表单的内容.许多字段(可能为零,可能不止一个,具体取决于页面)具有类似于需要先与服务器进行检查的唯一代码.我正在向服务器运行一个异步请求,它只是为每个字段响应’ok’或’take’.如果任何字段有错误,则页面不会提交.

一方面,这应该是异步的：它应该在该请求处于关闭处理时继续验证其余的表单字段,包括触发其他请求.如果同步进行呼叫,则会明显减慢后续字段的反馈速度.

另一方面,我想确保在对validate()方法作出yes或no之前返回(或超时)所有验证请求,并允许提交继续进行.因此,如果有两个字段需要验证,那么validate()方法应触发这两个AJAX请求,处理其余字段,然后等到最后返回之前返回这两个请求.

我可以通过一些丑陋的自制解决方案来实现这一点(可能涉及一组代表正在进行的请求的随机ID),但在我做之前是否有任何内置函数,插件或标准技术我应该使用？

澄清

我认为我需要的是在继续使用方法之前使代码等待来自一个或多个异步请求的结果.这与回调不同,因为方法的结果取决于请求的结果.它与同步请求不同,因为它们可能不止一个.

我在提交之前使用它来检查表单：

$("form").submit(function () {
    return validate($(this));
});

如果validate()方法返回false,则表单不提交. validate()hilights任何不被接受的字段.对于普通字段,validate()看起来像这样(非常简化的版本,没有反馈)：

function validate(form) {
    resetWarnings(form);
    var ok = true;

    //  required fields
    form.find("input.required").each(function () {
        var field = $(this);
        if (field.val() === "") {
            ok = false;
        }
        return this; // meaningless in this case but a good habit to keep
    });

    //  fields that matches a pattern
    form.find("input.pattern").each(function () {
        var field = $(this);
        var pattern = field.data("pattern");
        if (!field.val().match(pattern)) {
            ok = false;
        }
        return this;
    });

    //  varIoUs other rules for other sorts of field
    ...

    return ok;
}

对于AJAX字段,它更像是这样的：

    form.find("input.lookup").each(function () {
        var field = $(this);
        var url = field.data("lookup");
        $.ajax({
            url: url,data: { code: field.val() },success: function (result) {
                if (result === "taken") {
                    ok = false;
                }
            }
        }
    });

但是,当然,在调用成功方法之前,validate()已经完成.因此,如果我可以让它等到ajax完成(成功或错误)返回之前,我可以得到正确的结果并停止提交表单.如果我使ajax同步,那么整个方法会停止,直到完成,这是错误的.

进一步思考

鉴于Javascript的线程模型(也就是说根本没有),我在技术上要求的是什么？

最佳答案

使用jQuery 1.5,从多个异步请求中收集结果数据的最佳方法是使用表示这些请求及其状态的Deferred对象,以及包装函数$.when(…).then(allRequestsCompleteCallback(),someRequestFailedCallback())

这有助于避免使用多个嵌套回调函数,使您的代码更清晰,更易于维护.

JavaScript / jQuery示例：

function ajax1() { return $.ajax({ url: 'server1.PHP' }) }
function ajax2() { return $.ajax({ url: 'server2.PHP' }) }

$.when( ajax1(),ajax2() ).then(
    function() {
        // ajax1 AND ajax2 succeeded
    },function() {
        // ajax1 OR ajax2 succeeded
    }
);

ajax

jQuery AJAX：收集多个异步结果

相关文章