如何制作多个AJAX请求并使用每个请求的所有结果?

时间:2016-04-21 18:19:24

标签: javascript ajax asynchronous

我试图同时或并行地发出两个或多个单独的AJAX请求 当所有请求都完成并返回所有AJAX请求的数据时,我想立即调用包含所有数据的函数。

到目前为止:

  1. 成功制作单独的AJAX请求并分别收集数据。
  2. (成功?)制作2个并行的AJAX请求,但是当我尝试一次访问所有数据或将所有数据发送到函数时,我得到了未定义:
  3. 我试过了:

    *尝试使用以下AJAX样式:

    function Ajax(handleData) {
        $.ajax({
            url: url,  
            type: 'POST',
            data: data_ajax,
            success:function(data) {
                handleData(data);
            },
            error: function(e){
                console.log(e.message);
            }
        });
    }
    Ajax(function(output){
        response_parsed = JSON.parse(output);
        do stuff like assign to global var
    }
    

    *尝试使用以下AJAX样式:

    get_array = (function(){
          var response_parsed;
          $.ajax({
             url: url,  
             type: 'POST',
             data: data_ajax,
             success:function(data) {
                response_parsed = JSON.parse(data);
             },
             error: function(e){
                console.log(e.message);
             },
          });
          return {getData : function()
          {
             if(response_parsed) return response_parsed;
          }};
       })();
    

    在哪里尝试get_array.getData无效,但get_array的数据是closure

    enter image description here

    如何访问闭包?

    基本上,我有一个调用单独的AJAX请求(它们是单独的函数)的函数,然后成功时它应该将该数据分配给全局var或者发送该数据以进行处理和编译:

    我尝试将响应数据分配给全局变量(我知道每个人都讨厌全局变量)但我仍然无法使用或将该信息传递给函数(未定义):

    function start(){
        call_ajax1();
        call_ajax2();
        compile_data(data_array_from_request1, data_array_from_request2);
    }
    

    我尝试return成功数据。

    function start(){
        data_array_from_request1 = call_ajax1();
        data_array_from_request2 = call_ajax2();
        compile_data(data_array_from_request1, data_array_from_request2);
    }
    

    需要一些指导......
    我是否需要以某种方式将成功结合在一起?

    我最近找到了jQuery.when(),但不确定它是否正在寻找。

    请让我知道如何改进这个问题。

1 个答案:

答案 0 :(得分:1)

正如你提到的jQuery。它可以很容易地解决:

$.when(
    $.ajax('http://example1.com'),
    $.ajax('http://example2.com')
)
.then(function(response1, response2) {
    console.log(response1);
    console.log(response2);
})
.fail(function(err) {
    console.log('Something went wrong', err);
});

$.ajax('http://example1.com')当然可以是更高级的ajax调用,例如原帖中的那个:

$.when(
    $.ajax({
        url: url1,
        type: 'POST',
        data: data_ajax
    }),
    $.ajax({
        url: url2,
        type: 'POST',
        data: data_ajax
    })
)
.then(...)

另请参阅the jQuery documentation on .when,其中还介绍了如何处理错误。