用ajax触发一个请求,在前一个请求完成之前，将触发多个ajax请求

我有一个ASP.NET Web窗体Web应用程序，它具有我需要填充数据的各种切片。当用户执行搜索时，我当前有多个ajax请求，它们会启动以恢复数据。此数据独立于每个请求，无需等待先前的请求。

但是，当我执行请求时，它们将被串行处理。在一个案例中，当我的“服务历史记录”结束时，如果我点击该行执行另一个请求以弹出一个弹出窗口，它会转到pending，因为我的“流体”图块仍在工作。一旦Fluid请求完成，它就会处理我的ajax请求以显示服务历史记录详细信息。

以下是用户搜索时的代码：

....

function Search()

{

$.ajax({

type: "POST",

url: "Main.aspx/AjaxGetServiceHistory",

data: "{ SerialNumber: \"" + $("#txtSearch").val() + "\"," +

" SortDirection: \"" + $("#ctl00_ContentPlaceHolder1_SortDirection").val() + "\"," +

" SortColumn: \"" + $("#ctl00_ContentPlaceHolder1_SortColumn").val() + "\" }",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (msg) {

$("#dvServiceHistoryLoading").fadeOut(100);

$("#SearchHistoryResultsDiv").show();

// Set the result

var jsonValue = jQuery.parseJSON(msg.d);

// Set the result

if (jsonValue.Data[0] == null) {

$("#SearchHistoryResultsDiv").html("No results.");

return;

}

-- CODE TO DISPLAY RESULTS HERE --

},

error: function (xhr, ajaxOptions, thrownError) {

var errorMsg = "An error has occurred.";

$("#SearchHistoryResultsDiv").text("An error has occurred.");

$('#dvServiceHistoryLoading').hide();

}

});

$.ajax({

type: "POST",

url: "Main.aspx/AjaxGetFluid",

data: "{ SerialNumber: \"" + $("#txtSearch").val() + "\"," +

" SortDirection: \"" + $("#ctl00_ContentPlaceHolder1_FluidSortDirection").val() + "\"," +

" SortColumn: \"" + $("#ctl00_ContentPlaceHolder1_FluidSortColumn").val() + "\" }",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (msg) {

$("#dvFluidLoading").fadeOut(100);

$("#FluidResultsDiv").show();

// Set the result

if (msg.d == "") {

$("#FluidResultsDiv").html("

No results.

");

return;

}

// Set the result

var jsonValue = jQuery.parseJSON(msg.d);

if (jsonValue.Details[0] != "") {

$("#FluidResultsDiv").html(jsonValue.Details[0]);

UpdateTDtoTH("FluidResultsDiv");

WireUpSorting("FluidResultsDiv");

}

else {

$("#FluidResultsDiv").html("No results found.");

}

},

error: function (xhr, ajaxOptions, thrownError) {

$("#FluidResultsDiv").show();

$("#FluidResultsDiv").text("An error has occurred.");

$('#dvFluidLoading').hide();

}

});

}

调用此方法是用户单击服务历史记录链接。它会创建一个新的ajax请求。

function ViewServiceHistoryDetail(serialNumber, invoiceNumber, segmentNumber) {

ClearServiceHistoryLabels();

$.ajax({

type: "POST",

url: "Main.aspx/AjaxGetServiceHistoryLineItem",

data: "{ SerialNumber: \"" + serialNumber + "\"," +

" InvoiceNum: \"" + invoiceNumber + "\"," +

" SegmentNum: \"" + segmentNumber + "\" }",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (msg) {

// Set the result

},

error: function (xhr, ajaxOptions, thrownError) {

}

....