Laravel项目中如何在数据入库后自动关闭SweetAlert？

原代码存在的问题 #

• 依赖固定时长定时器关闭弹窗，无法根据AJAX请求完成状态动态处理
• AJAX成功回调中仍嵌套不必要的固定定时器，导致弹窗关闭时机不准确
• e变量未定义，e.preventDefault()会引发报错
• 未保存SweetAlert实例，无法直接调用关闭方法

修改后的实现代码 #

// 给上传按钮绑定点击事件，阻止默认提交行为
document.getElementById('subImport').addEventListener('click', function(e) {
    e.preventDefault();

    // 保存SweetAlert实例，方便后续调用关闭方法
    let swalInstance = Swal.fire({
        text: '数据正在导入中!',
        allowOutsideClick: false,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // 执行AJAX上传请求
    $.ajax({
        url: "/你的上传接口路由", // 替换为项目实际的Laravel上传路由
        type: "POST",
        contentType: false,
        processData: false,
        data: new FormData(document.getElementById('你的表单ID')), // 替换为实际表单ID
        success: function(data) {
            // 请求成功后立即关闭SweetAlert
            swalInstance.close();
            
            // 执行后续页面操作
            document.getElementById('subTampil').click();
            setTimeout(function() {
                document.getElementById("coba").hidden = true;
                document.getElementById("divSupp").hidden = false;
                document.getElementById("divMember").hidden = true;
                document.getElementById("divItem").hidden = true;
            }, 100);
        },
        error: function(xhr) {
            // 请求失败时关闭弹窗并提示错误
            swalInstance.close();
            Swal.fire('错误', '数据导入失败', 'error');
        }
    });
});

修改说明 #

• 给按钮绑定click事件并阻止默认提交行为，解决e变量未定义的报错问题
• 将SweetAlert实例保存到变量swalInstance，在AJAX的success和error回调中直接调用close()方法，实现请求完成后动态关闭弹窗
• 移除所有不必要的固定定时器，确保弹窗关闭时机与请求结果同步
• 补充错误处理逻辑，请求失败时也关闭弹窗并给用户提示
• 完善AJAX请求的必要参数，需替换为你项目中的实际路由和表单ID

内容的提问来源于stack exchange，提问作者Billie