javascript - AJAX GET 在第一次调用时返回未定义，但在第二次调用时有效

Question

我正在 ASP.NET MVC 中开发一个房地产 Web 应用程序。我的问题出在我的预订部分。

我正在使用 AJAX 在返回 JSONResult 的 Controller 中发布。这是我的代码:

Controller

[HttpPost]
public JsonResult SubmitReservation(ReservationViewModel rvm)
{
    return Json(rvm, JsonRequestBehavior.AllowGet);
}

主要 AJAX

    var rvm = new ReservationViewModel();

    getBuyerInfo(rvm.SelectedBuyerID, clientCallback);
    getSiteInfo(rvm.SelectedSiteID, siteCallback);
    getUnitInfo(rvm.SelectedUnitID, unitCallback);

    $.ajax({
        url: "/Reservations/SubmitReservation",
        data: JSON.stringify(rvm),
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        success: function () {

            console.log(clientData);
            console.log(siteData);
            console.log(unitData);
            //Assignment of data to different output fields

            //Client Data
            $('#clientName').html(clientData.FullName);
            $('#clientAddress').html(clientData.Residence);
            $('#clientContact').html(clientData.ContactNumber);

            //Site Data
            $('#devSite').html(siteData.SiteName);
            $('#devLoc').html(siteData.Location);

            ////House Unit Data
            $('#unitBlock').html(unitData.Block);
            $('#unitLot').html(unitData.Lot);
            $('#modelName').html(unitData.ModelName);
            $('#modelType').html(unitData.TypeName);
            $('#lotArea').html(unitData.LotArea);
            $('#floorArea').html(unitData.FloorArea);
            $('#unitBedrooms').html(unitData.NumberOfBedrooms);
            $('#unitBathrooms').html(unitData.NumberOfBathrooms);
            $('#unitPrice').html(unitData.Price);

            $('#reservationDetails').show();
            alert("Success!");
        },
        error: function (err) {
            alert("Error: " + err);
        }
    });

获取数据的函数

function getBuyerInfo(id, cb) {
   $.ajax({
       url: "/BuyersInformation/GetBuyerByID/" + id,
       type: "GET",
       contentType: "application/json",
       dataType: "json",
       success: cb
  });
 }

function getSiteInfo(id, cb) {
    $.ajax({
        url: "/Sites/GetSiteByID/" + id,
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: cb
     });
 }

function getUnitInfo(id, cb) {
    $.ajax({
        url: "/HouseUnits/GetUnitByID/" + id,
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        success: cb
     });
  }

function ReservationViewModel() {

var buyerId = $('#SelectedBuyerID').val();
var siteId = $('#SelectedSiteID').val();
var unitId = $('#SelectedUnitID').val();
var rsvDate = $('#ReservationDate').val();

var me = this;
me.ReservationDate = rsvDate;
me.SelectedBuyerID = buyerId;
me.SelectedSiteID = siteId;
me.SelectedUnitID = unitId;

}

function clientCallback(result) {
    clientInfo = result;
    clientData = clientInfo[0];
 }

function siteCallback(result) {
   siteInfo = result;
   siteData = siteInfo[0];
 }

function unitCallback(result) {
    unitInfo = result;
    unitData = unitInfo[0];
}

整个代码第二次运行良好。然而，它第一次不起作用。当我刷新页面并点击“创建”时，它返回未定义。但是当我再次点击该按钮而不刷新页面时，它运行良好。有人可以向我解释一下这个吗？为什么 AJAX 最初返回 undefined 而在后续调用时不返回？提前致谢。

Answer 1

您正在代码中的这些函数内调用多个 ajax 请求:

getBuyerInfo(rvm.SelectedBuyerID, clientCallback);
getSiteInfo(rvm.SelectedSiteID, siteCallback);
getUnitInfo(rvm.SelectedUnitID, unitCallback);

最后是$.ajax({...})，您可以在其中使用之前的 ajax 调用的结果。

您的问题是，第一个 ajax 调用不一定会在启动最后一个 ajax 之前返回结果，因为它们都是异步的。在调用最后一个 ajax 之前，您必须确保收到三个响应。使用 Promise 或 jQuery when，如下所示:

var rvm = new ReservationViewModel();

$.when( 

    $.ajax({
       url: "/BuyersInformation/GetBuyerByID/" + rvm.SelectedBuyerID,
       type: "GET",
       contentType: "application/json",
       dataType: "json"
    }),

    $.ajax({
        url: "/Sites/GetSiteByID/" + rvm.SelectedSiteID,
        type: "GET",
        contentType: "application/json",
        dataType: "json"
     }),

    $.ajax({
        url: "/HouseUnits/GetUnitByID/" + rvm.SelectedUnitID,
        type: "GET",
        contentType: "application/json",
        dataType: "json"
     })

).done(function ( clientResponse, siteResponse, unitResponse ) {

    clientInfo = clientResponse;
    clientData = clientInfo[0];          

    siteInfo = siteResponse;
    siteData = siteInfo[0];

    unitInfo = unitResponse;
    unitData = unitInfo[0];          

    $.ajax({ ... }) // your last ajax call

});