如何在函数返回之前从 AJAX 调用中获取结果？

Question

我的页面有一个按钮，该按钮调用 Razor 页面页面处理程序以删除关联的项目。

<a class="delete-item" data-id="@item.Id" asp-page-handler="delete" asp-route-id="@item.Id"><img src="/images/delete.png" title="Delete" /></a>

我已经定义了一个 Javascript 点击处理程序。如果不应该删除该项目，我需要该处理程序返回 false。

$('.delete-item').on('click', function (e) {
    var id = $(this).data('id');
    var tr = $(this).closest('tr');
    var td = tr.find('.item-description');

    // Get number of lease details for this lease
    $.ajax({
        type: 'GET',
        url: '?handler=LeaseDetailCount',
        contentType: 'application/json',
        dataType: 'json',
        data: { 'leaseId': id },
    })
    .done(function (response) {
        var description = 'Delete "' + description + '"? Are you sure? This cannot be undone.\r\n\r\n';
        if (response.count == 0)
            description += 'This lease has no lease details.'
        else
            description += 'WARNING: This lease has ' + response.count + ' lease detail(s).';
        if (!confirm(description))
            return false;
    })
    .fail(function (response) {
        alert(response.responseText);
    })
    //.always(function (response) {
    //});
}

当然，问题在于 AJAX 调用是异步的。所以它会在我的确认显示之前返回。

我怎样才能让上面的代码按我的意愿工作？

Answer 1

如果您不想为锚标记设置asp-page-handler，这是可能的。正如你提到的

AJAX 调用是异步的

我们无法预测哪个结果先出现，href 导航或 onclick AJAX 响应

<a class="delete-item" data-id="@item.Id"><img src="/images/delete.png" title="Delete" /></a>

在AJAX.done事件中，如果确认是OK页面重定向到delete handler window.location.href = "/?id=" + id + "&handler=delete";

.done(function (response) {
    ......
    .......
    if (!confirm(description))
        return false;
    else
        window.location.href = "/?id=" + id + "&handler=delete";
})