如何在 AJAX 调用后保持弹出窗口打开？ - 常见的解决方法和常见问题解答

2024-03-10 15:49:22

## 弹出窗口的持久打开：解决 AJAX 关闭的问题

作为一名程序员和技术作家，我经常遇到这样的问题：在 MVC 应用程序中，当用户在弹出窗口中触发 AJAX 调用时，窗口会自动关闭。这种令人恼火的情况通常是由 AJAX 调用重置了弹出窗口的模态状态引起的。本文将深入探讨这一问题，并提供多种技巧来保持弹出窗口在 AJAX 调用后继续打开，让你能够发布消息或执行其他后续操作。

### 问题：AJAX 关闭弹出窗口

在 MVC 应用程序中，弹出窗口通常使用模态呈现，这会将焦点锁定在窗口上，并禁用页面其余部分。当用户在弹出窗口中触发 AJAX 调用时，通常会向服务器发送一个请求，用于获取数据、提交表单或执行其他操作。然而，当 AJAX 调用返回时，它可能会重置弹出窗口的模态状态，导致窗口自动关闭。

### 解决方法 1：使用 data-backdrop 属性

一种解决这个问题的方法是在弹出窗口的 HTML 代码中使用 data-backdrop 属性。将此属性设置为 "static" 将防止用户通过单击窗口外部关闭窗口。

<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addUpdateModalModalLabel" aria-hidden="true">
    ...
</div>

### 解决方法 2：使用 e.preventDefault()

另一个解决办法是在触发 AJAX 调用的按钮上使用 e.preventDefault()。这将阻止表单提交，从而防止窗口关闭。

<button type="button" class="btn btn-sm btn-primary btn-relative" id="saveCoverage" onclick="Continue(e)">
    ...
</button>

### 解决方法 3：手动打开窗口

在 AJAX 调用成功后，可以使用 JavaScript 手动重新打开窗口。

function Continue(e) {
    e.preventDefault();

    $.ajax({
        type: "GET",
        data: { id: 123 },
        headers: {},
        url: '@Url.Action("method", "Controller")',
        success: function (result) {
            if (result.success) {
                // do something

                // 重新打开窗口
                $('#exampleModal').modal('show');
            }
        },
        error: function (req, status, error) {
        }
    });
}