c# - Ajax 完整功能问题

Question

我正在处理我的拼贴项目(用 C# 编写的 Web 应用程序)并且我正在使用 javascript 使用以下代码动态添加带有详细信息和图像的酒店:

$.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);
    }
});

多次尝试后，均无法实现完整的功能。

Answer 1

complete 调用只会完成第一个 ajax 调用。不是 for 循环中的那个。如果您想检查是否所有请求都已完成，请使用 $.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
})