jQuery AJAX : collecting multiple asynchronous results

Question

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

一方面，这应该是异步的:当该请求停止处理时，它应该继续验证其余的表单字段，包括触发其他请求。如果调用是同步进行的，那么它会明显减慢后面字段的反馈速度。

另一方面，我想在对 validate() 方法做出"is"或“否”响应之前确保所有验证请求均已返回(或超时)，并且允许继续提交或不。因此，如果有两个字段需要验证，则 validate() 方法应触发这两个 AJAX 请求，处理其余字段，然后等到这两个请求返回后再最终返回。

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

<小时/>

澄清

我认为我需要的是让代码等待一个或多个异步请求的结果，然后再继续执行一种方法。这与回调不同，因为该方法的结果取决于请求的结果。它与同步请求不同，因为可能有多个同步请求。

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

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

如果 validate() 方法返回 false，则表单不会提交。 validate() 突出显示任何不接受的字段。对于普通字段，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() 在调用 success 方法之前就已经完成了。因此，如果我可以让它等到 ajax 完成(成功或错误)后再返回，我就可以获得正确的结果并停止提交表单。如果我使 ajax 同步，那么整个方法将停止直到完成，这是错误的。

<小时/>

进一步思考

考虑到 Javascript 的线程模型(也就是说根本没有)，我所要求的在技术上是不可能的吗？

Answer 1

对于 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
    }
);

在此处查看更多文档和示例:

• http://api.jquery.com/category/deferred-object/
• http://api.jquery.com/jQuery.when
• http://api.jquery.com/deferred.then