在一个ajax中调用多个api

时间:2016-05-09 05:03:22

标签: jquery ajax

例如我有一个像下面这样的ajax函数

$.ajax({ 
            url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119",//getting the api
            type: 'get',
            success: function(data){
                console.log(data.result);
            }
            });

在上面它只调用了个人资料119,但我也想拨打118和177,我想知道如何在for循环中执行此操作,因为实际上它是我们需要调用的api数量未知

url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"118",
url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"177",

以下是 INCORRECT 方法我只是想表达我的想法

     $.ajax({ 
                    url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119",
 '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"118",'/dashboard/getTrend'+'?period=30d' +"&profileId=" +"177",
//getting the api
                    type: 'get',
                    success: function(data){
                        console.log(data.result);
                    }
                    });

更新1:

//trend chart
        function trend1(){
        $.ajax({ 
        url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119",//getting the api
        type: 'get',
        success: function(data){
            console.log(data.result) //correct
        }
        });
        }
        function trend2(){
        $.ajax({ 
        url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"120",//getting the api
        type: 'get',
        success: function(data){
            console.log(data.result) //correct
        }
        });
        }

        $.when( trend1(), trend2()).done(function(trend1_data, trend_data){

            console.log(trend1_data.result)
            console.log(trend2_data.result)
        });

我试图这样做是对的吗?

更新2:

function trend1() {
            return $.ajax({
                url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "119", //getting the api
                type: 'get',
                success: function(data) {
                    console.log(data.result)
                }
            });
        }

        function trend2() {
            return  $.ajax({
                url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "120", //getting the api
                type: 'get',
                success: function(data) {
                    console.log(data.result)
                }
            });
        }

        $.when(trend1(), trend2()).done(function(trend1_data, trend2_data) {
            console.log(trend1_data.result) //undefined
            console.log(trend2_data.result)//undefined
        });

我尝试将函数修改为此函数,但未定义when函数内的console.log(),这意味着它什么都不读。

2 个答案:

答案 0 :(得分:2)

您无法将多个网址传递给$.ajax()方法,但可以使用jQuery.when()

$.when( 
    $.ajax( {url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"119", method:"GET"}), 
    $.ajax( {url: '/dashboard/getTrend'+'?period=30d' +"&profileId=" +"177", method:"GET"}),
)
.done(function( a1, a2 ) {
   // a1 and a2 are arguments resolved for the url1 and url2 ajax requests, respectively.
   // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
});

您需要从trend1trend2方法

返回承诺
//trend chart
function trend1() {
    return $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "119", //getting the api
        type: 'get',
        success: function(data) {
            console.log(data.result)
        }
    });
}

function trend2() {
    return  $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + "120", //getting the api
        type: 'get',
        success: function(data) {

        }
    });
}

$.when(trend1(), trend2()).done(function(trend1_data, trend_data) {
    console.log(trend1_data.result)
    console.log(trend2_data.result)
});

答案 1 :(得分:1)

您可以使用$.each

使用多个网址
var locationOne = '/dashboard/getTrend?period=30d&profileId=119';
var locationTwo = '/dashboard/getTrend?period=30d&profileId=120';
var multipleURL = [locationOne, locationTwo];

$.each(multipleURL, function (i, url) {
    $.ajax(url,
            {
                type: 'POST',
                data: {
                },
                success: function (data) {

                }
            }
    );
});