Question

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

我正在使用AJAX在一个返回JSONResult的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];
}

整个代码第二次运作良好。但是，它不适用于第一次。当我刷新页面并点击Create时，它返回undefined。但是，当我再次点击该按钮而不刷新页面时，它运行良好。有人可以向我解释这个吗？为什么AJAX首先返回undefined而不是后续调用？提前谢谢。

Answer 1

在这些函数中，您在代码中调用了几个ajax请求：

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

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

你的问题是，在你启动最后一个ajax之前，第一个ajax调用不一定会返回结果，因为它们都是异步的。在调用最后一个ajax之前，你必须确保得到三个响应。使用promises或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

});

Answer 2

AJAX来电是asynchronous。您上次ajax通话将不会等到您的上述3个ajax呼叫完成其工作。因此，您可以在此处使用 $.when 和.done，如下所示。

$.when(
    getBuyerInfo(rvm.SelectedBuyerID, clientCallback);
    getSiteInfo(rvm.SelectedSiteID, siteCallback);
    getUnitInfo(rvm.SelectedUnitID, unitCallback);
).done(
    $.ajax({
       //Ajax part
    })
);

AJAX GET在第一次调用时返回undefined，但在第二次调用时返回

2 个答案: