Ajax 完整功能问题答案

【问题标题】：Ajax complete function issueAjax 完整功能问题
【发布时间】：2013-09-22 11:22:29
【问题描述】：

我正在处理我的拼贴项目（用 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);
    }
});

经过多次尝试，都没有完整的功能。

【问题讨论】：

你忘了说明问题所在！代码应该做什么？它实际上在做什么？您看到任何错误吗？
欢迎来到 async 的精彩世界！您需要等待它完成。
Ajax 是异步的。外部 ajax 调用的 complete 回调在内部 ajax 调用的 complete 回调之前执行。
@bfavaretto 控制台中没有显示错误，它报告了所有值，它只是没有附加在 $('.hotels').append(window.t);
@JasonP 在外部 Ajax 完成回调之前调用内部 Ajax 怎么可能？

标签： c# javascript jquery ajax

【解决方案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
})

【讨论】：