多个ajax调用单个函数javascript

Question

我有 3 个 ajax 调用。来自每个 ajax 调用的数据被传递给john_doe();

呼叫 1

$.ajax({
        url: url1,
        dataType: "JSON",
        type: "GET",
      }).success(function(data1){

    john_doe(data1);
});

呼叫 2

$.ajax({
        url: url2,
        dataType: "JSON",
        type: "GET",
      }).success(function(data2){

    john_doe(data2);
});

呼叫 3

$.ajax({
        url: url3,
        dataType: "JSON",
        type: "GET",
      }).success(function(data3){

    john_doe(data3);
});

主要功能

function john_doe(param){
console.log(param); //Print data from all three ajax call.
}

john_doe函数中的data1、data2、data3如何分离？因为我需要进行算术运算。

目前，

输入

data1 = one,two,three
data2 = four
data3 = five

输出

console.log(param) 将输出为

one
four
five

我想要输出为

console.log(param[0])
console.log(param[1])
console.log(param[2])

param[0] containing one,two,three
param[1] containing four
param[2] containing five

我无法控制数据。如何分别访问data1、data2和data3？

Answer 1

使用 Promise，您可以访问 Promise.all() 回调中的所有数据，并一次完成任何您需要的操作。假设使用 jQuery 3+。可以在旧版本中使用$.when

  var urls =['data-1.json','data-2.json','data-3.json'];
  // array of ajax promises
  var reqPromises = urls.map(function(url){
    return $.ajax({
       url: url,
       dataType: "JSON",
       type: "GET"
    });
  });

  Promise.all(reqPromises).then(function(res){
     // res is array of all the objects sent to each `$.ajax` from server
     // in same order that urls are in
     var param = res.map(function(item){
       return item.val
     });

     console.log(param)
  })

DEMO

Answer 2

快速而肮脏的解决方案是简单地传入一个标识符，为什么这很脏，因为每次执行此操作时添加第 4 次或第 5 次调用都不是真正可扩展的，您需要添加更多标识符和 if 语句main 方法最终会变得非常丑陋。但是有时候“保持简单”是可以的。

主要功能：

function john_doe(identifier, param) {

    // best to use something more readable then numbers
    if(identifier == 1) {    
       console.log(param); //Print data from all ajax call 1.
    } else if(identifier == 2) {
       console.log(param); //Print data from all ajax call 2.
    } else if(identifier == 23) {
       console.log(param); //Print data from all ajax call 3.
    } else {
       // handle bad id
    }
}

在您的 ajax 调用中，传入正确的标识符，例如 Call 2：

    $.ajax({
        url: url2,
        dataType: "JSON",
        type: "GET",
      }).success(function(data2){

    // numeric 2 in in the first param is your identifier
    john_doe(2,data2); });

Answer 3

添加一个参数让你知道它是从哪里调用的

呼叫 1

$.ajax({
        url: url1,
        dataType: "JSON",
        type: "GET",
      }).success(function(data){

    john_doe('call1',data);
});

呼叫 2

$.ajax({
        url: url2,
        dataType: "JSON",
        type: "GET",
      }).success(function(data){

    john_doe('call2',data);
});

呼叫 3

$.ajax({
        url: url3,
        dataType: "JSON",
        type: "GET",
      }).success(function(data){

    john_doe('call3',data);
});

主要功能

function john_doe(call,data){
    console.log('Called from : ' + call);
    console.log(data); //Print data from all three ajax call.
}

Answer 4

这个怎么样？ 声明一个对象容器来保存您的响应数据值和算术运算函数。

var myParams = {
    all_params: [],
    getParams: function(){
        return this.all_params;
    },
    setParam: function(index, data){
        this.all_params[index] = data;
    },
    yourArithmeticOperation: function(){
        console.log(this.all_params); // your actual logic using all 3 ajax response data
    }
}

然后，在您的 ajax 调用中：

// call 1
$.ajax({
    url: url1,
    dataType: "JSON",
    type: "GET",
}).success(function(data){
   myParams.setParam(0, data); // add ajax 1 response data
});

// call 2
$.ajax({
    url: url1,
    dataType: "JSON",
    type: "GET",
}).success(function(data){
   myParams.setParam(1, data); // add ajax 2 response data
});

// call 3
$.ajax({
    url: url1,
    dataType: "JSON",
    type: "GET",
}).success(function(data){
   myParams.setParam(2, data); // add ajax 3 response data
});

如果您需要所有响应数据，

// after all three ajax calls
params = myParams.getParams();
console.log(params);

最后，你的算术运算，

myParams.yourArithmeticOperation();

Answer 5

尝试将 async: false 添加到您的 ajax 调用中

$.ajax({
        url: url1,
        dataType: "JSON",
        type: "GET",
        async: false,
      }).success(function(data){

    john_doe('call1',data);
});