javascript - Ajax 回调在函数调用后触发

Question

您好，在日期输入更改事件时调用的函数中有一个 ajax 调用，以检查日期是否已被用户使用。点击功能完成后，Ajax 调用成功。

我如何获得成功结果并继续使用 #datepicker 更改功能，因为我需要 json 结果用于其余功能。

控制者

public ActionResult IsDateAvailable(DateTime date, int Id) {

  var dateAvailable = !(_context.Trading.Any(t => t.uId == Id && t.TradingDate == date));

  if (!(dateAvailable)) {
    return Json(new {
      status = false, msg = "This date already exists."
    });
  }

  return Json(new {
    status = true
  });
}

JavaScript

$(document).ready(function() {
  var message;
  var isDateValid;

  function CheckDate(para) {
    var dateValid;
    var mesg;

    return $.ajax({
      url: '@Url.Action("IsDateAvailable", "Trading")',
      type: "GET",
      data: para,
      dataType: "json",
      success: function(data) {
        if (!(data.status)) {
          message = data.msg;
        } else {
          isDateValid = true;
        }
      },
      error: function(xhr, httpStatusMessage) {
        alert(xhr + httpStatusMessage);
      }
    });
  }

  $("#datePicker").change(function() {
    $("#alert").css({
      'display': 'none'
    });

    if (Id == 0) {
      $("#alert").attr('class', 'alert alert-danger');
      $("#alert").text('Please select a User.');
      $("#alert").show();

      return false;
    }

    var date = $(this).val();

    var para = {
      date: date,
      Id: Id
    };
    CheckDate(para);

    if (isDateValid) {
      $("#btnAdd").show();
    } else {
      $("#btnAdd").css({
        'display': 'none'
      });
      $("#alert").attr('class', 'alert alert-danger');
      $("#alert").text(message);
      $("#alert").show();
    }

  });
});

Answer 1

你应该转向异步。更改您的代码以与这些匹配:

.
.
.
function CheckDate(para) {
    return new Promise((resolve, reject) => {
        return $.ajax({
            url: '@Url.Action("IsDateAvailable", "Trading")',
            type: "GET",
            data: para,
            dataType: "json",
            success: function(data) {
                if (!(data.status)) {
                    message = data.msg;
                } else {
                    isDateValid = true;
                }
                resolve();
            },
            error: function(xhr, httpStatusMessage) {
                alert(xhr + httpStatusMessage);
                reject();
        }
    });
}
.
.
.
checkDate(para).then(res => {
    if (isDateValid) {
      $("#btnAdd").show();
    } else {
      $("#btnAdd").css({
        'display': 'none'
      });
      $("#alert").attr('class', 'alert alert-danger');
      $("#alert").text(message);
      $("#alert").show();
    }
}).catch(err => { /* do something */ });