如何在表单提交后显示Toast通知

<form method="POST" action="process_user.php" id="add_user_form">
    <label for="fullname">全名:</label>
    <input type="text" id="fullname" name="fullname" required><br><br>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required><br><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br><br>
    <label for="access">权限:</label>
    <select id="access" name="access">
        <option value="User">普通用户</option>
        <option value="Admin">管理员</option>
    </select><br><br>
    <button type="submit" name="add_user">添加用户</button>
</form>

<!-- Toast通知的HTML结构，例如使用Bootstrap Toast -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">通知</strong>
            <small>刚刚</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toastMessage">
            表单已提交，正在处理...
        </div>
    </div>
</div>

(() => {
    const form = document.getElementById('add_user_form');
    const liveToast = document.getElementById('liveToast');
    const toastMessage = document.getElementById('toastMessage');
    let toastShown = false; // 标记，避免重复显示Toast

    // 初始化Toast（如果使用Bootstrap等库）
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(liveToast);

    form.addEventListener('submit', function(event) {
        if (toastShown) {
            return; // 如果Toast已显示，则直接返回，允许表单提交
        }

        event.preventDefault(); // 阻止表单默认提交行为
        toastShown = true;

        // 更新Toast消息并显示
        toastMessage.textContent = "正在提交表单，请稍候...";
        toastBootstrap.show();

        // 设定一个延迟，在Toast显示3秒后，再次提交表单
        // 注意：这里的this.submit()会触发表单的原始提交行为，
        // 也就是向action属性指定的URL发送请求。
        setTimeout(() => {
            this.submit();
        }, 3000); // 3秒后重新提交
    });
})();

<?php
require_once('db/opms_db.php'); // 假设你的数据库操作类在这里
$store = new OPM_DB(); // 实例化你的数据库操作类

header('Content-Type: application/json'); // 声明返回JSON类型

$response = ['success' => false, 'message' => '未知错误'];

if (isset($_POST['add_user'])) {
    $fullname = $_POST['fullname'];
    $username = $_POST['username'];
    $password = $_POST['password'];
    $access = $_POST['access'];

    if ($store->check_user_exist($username) == 0) {
        // 假设add_user_to_db是实际执行插入的函数
        // 并在内部处理数据库连接和准备语句
        $result = $store->add_user_to_db($fullname, $username, $password, $access); 
        if ($result) {
            $response = ['success' => true, 'message' => '用户添加成功！'];
        } else {
            $response = ['success' => false, 'message' => '数据库操作失败，请重试。'];
        }
    } else {
        $response = ['success' => false, 'message' => '用户 ' . htmlspecialchars($username) . ' 已存在！'];
    }
} else {
    $response = ['success' => false, 'message' => '无效的请求。'];
}

echo json_encode($response);
exit(); // 确保不再输出其他内容
?>

(() => {
    const form = document.getElementById('add_user_form');
    const liveToast = document.getElementById('liveToast');
    const toastMessage = document.getElementById('toastMessage');
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(liveToast); // 初始化Toast

    form.addEventListener('submit', async function(event) {
        event.preventDefault(); // 阻止表单默认提交

        // 收集表单数据
        const formData = new FormData(this);

        try {
            const response = await fetch(this.action, { // 使用表单的action属性作为URL
                method: this.method, // 使用表单的method属性
                body: formData
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const result = await response.json(); // 解析JSON响应

            // 根据服务器返回的结果显示Toast
            if (result.success) {
                toastMessage.textContent = result.message;
                liveToast.classList.remove('bg-danger'); // 移除可能的错误样式
                liveToast.classList.add('bg-success'); // 添加成功样式
            } else {
                toastMessage.textContent = result.message;
                liveToast.classList.remove('bg-success'); // 移除可能的成功样式
                liveToast.classList.add('bg-danger'); // 添加错误样式
            }
            toastBootstrap.show();

            // 如果用户添加成功，可以考虑清空表单或执行其他操作
            if (result.success) {
                this.reset(); // 清空表单
                // 也可以在这里进行页面重定向，如果需要的话
                // setTimeout(() => window.location.href = 'users.php', 2000);
            }

        } catch (error) {
            console.error('表单提交失败:', error);
            toastMessage.textContent = '请求失败，请检查网络或稍后重试。';
            liveToast.classList.remove('bg-success');
            liveToast.classList.add('bg-danger');
            toastBootstrap.show();
        }
    });
})();