Ajax完整功能问题

I'm working on my collage project (Web app written in C#) and I'm using javascript to dynamically add hotels with details and image using following code:

$.ajax({
    type: 'POST',
    url: 'WebServiceBooking.asmx/Hotels',
    data: "{'stars':'" + stars + "','countryid':'" + country + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $('.hotels').empty();
        var hotels = data.d; //getting List<Hotel> from [WebMethod](works)
        window.t = "";
        window.ImageID = "";
        $.each(hotels, function (index, hotel) {
            $.ajax({ //this ajax is getting Image for specified hotel.HotelID
                type: 'POST',
                url: 'WebServiceBooking.asmx/HotelImage',
                data: "{'hotelid':'" + hotel.HotelID + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    window.ImageID = data.d;
                    //$('.hotels-image').attr('src', 'ImageHandlerFromID.ashx?ImageID=' + data.d);
                },
                complete: function (xhr, status) {
                    window.t += "<div class='hotel clearfix'><h3><a href='hotel.aspx?HotelID=" + hotel.HotelID + "'>" + hotel.HotelName + "</a></h3><p class='hotelAddress'>" + hotel.HotelAddress + "</p><p class='hotelPhone'>" + hotel.HotelPhone + "</p>";
                    window.t += "<img class='hotels-image' src='ImageHandlerFromID.ashx?ImageID=" + window.ImageID + "'/>";
                    window.t += "</div>";
                    console.log(window.ImageID);
                }
            });

            console.log(ImageID);
        });
        console.log(window.t);
    },
    complete: function (xhr, status) {
        $('.hotels').append(window.t);
    }
});

After several attempts, neither complete function works.

The complete call will only complete the first ajax call. Not the one's in the for loop. If you want to check if all requests are done use $.when.

var requests = [];
var overall_data = {"hotels" = [], "hotel_images" = []}
var main_request = $.ajax({
  type: 'POST',
  url: 'WebServiceBooking.asmx/Hotels',
  data: "{'stars':'" + stars + "','countryid':'" + country + "'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
    $('.hotels').empty();
    var hotels = data.d; //getting List<Hotel> from [WebMethod](works)
    overall_data["hotels"] = hotels
    window.t = "";
    window.ImageID = "";
    $.each(hotels, function (index, hotel) {
        var hotel_request = $.ajax({ //this ajax is getting Image for specified hotel.HotelID
            type: 'POST',
            url: 'WebServiceBooking.asmx/HotelImage',
            data: "{'hotelid':'" + hotel.HotelID + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                window.ImageID = data.d;
                overall_data["hotel_images"].push(data)
                //$('.hotels-image').attr('src', 'ImageHandlerFromID.ashx?ImageID=' + data.d);
            }
        });
        requests.push(hotel_request)
        console.log(ImageID);
    });
    console.log(window.t);
  }
});

requests.push(main_request);

$.when.apply(null, requests).done(function(){
// Do your stuff with overall_data
})