Laravel中如何通过Toastr+AJAX实现删除前确认功能

针对你的需求，我会提供两种可行的实现方案，你可以根据自己的偏好选择：

方案一：自定义Toastr风格确认框（完全使用Toastr组件） #

这种方案会创建一个带确认/取消按钮的Toastr提示框，完全符合你想要的Toastr风格交互。

步骤1：确保Toastr资源已引入 #

首先确认你的项目中已经正确引入了Toastr的CSS和JS文件（建议使用本地资源）：

<!-- Toastr CSS -->
<link rel="stylesheet" href="/path/to/toastr.min.css">
<!-- Toastr JS -->
<script src="/path/to/toastr.min.js"></script>

步骤2：修改AJAX点击事件代码 #

将你原有的点击事件代码替换为以下内容，我们会把AJAX逻辑封装成独立函数，并添加Toastr确认交互：

// 取消关注按钮点击事件
$('#following').click(function (e) {
    e.preventDefault();
    
    // 配置Toastr参数，禁用自动关闭
    toastr.options = {
        "closeButton": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "timeOut": 0, // 不自动关闭
        "extendedTimeOut": 0,
        "tapToDismiss": false // 点击提示框本身不关闭
    };

    // 弹出确认提示
    const toast = toastr.warning('Are you sure to unfollow this feed?', 'Confirmation');

    // 给提示框添加确认和取消按钮
    const $toastElement = $('.toast:last');
    $toastElement.append(`
        <div class="toast-actions" style="margin-top:10px; text-align:right;">
            <button class="btn btn-sm btn-success toast-confirm">OK</button>
            <button class="btn btn-sm btn-danger toast-cancel">Cancel</button>
        </div>
    `);

    // 确认按钮点击事件：执行取消关注逻辑
    $('.toast-confirm').on('click', function() {
        toastr.clear(toast); // 关闭提示框
        performUnfollow(); // 执行AJAX请求
    });

    // 取消按钮点击事件：仅关闭提示框
    $('.toast-cancel').on('click', function() {
        toastr.clear(toast);
    });
});

// 封装取消关注的AJAX逻辑
function performUnfollow() {
    const formData = $("#unfollowFeed").serialize();
    $('.error-msg').html('');
    
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: baseUrl + 'unfollow',
        type: 'POST',
        data: formData,
        success: function (data) {
            const id = $('#feed_id').val();
            $("#feedId li[feed-id=" + id + "]").remove(); // 移除侧边栏对应项
            toastr.error('The feed was removed.');
            $('#follow').show();
            $('#following').hide();
        },
        error: function() {
            // 处理请求失败情况
            toastr.error('Failed to unfollow the feed.');
        }
    });
}

步骤3：视图代码保持不变 #

你的现有视图代码不需要修改，保持原样即可：

<a href="#" style="{{ $status == 0 ? 'display:none;' : '' }}" class="btn btn-sm btn-primary following" id="following">
    {{ __('Following') }}
</a>

方案二：原生确认框 + Toastr结果提示（更简洁） #

如果你不需要严格的Toastr风格确认框，这种方案更简单，用原生浏览器确认框做确认，操作结果用Toastr提示：

$('#following').click(function (e) {
    e.preventDefault();
    
    // 弹出原生确认框
    if (confirm('Are you sure to unfollow this feed?')) {
        const formData = $("#unfollowFeed").serialize();
        $('.error-msg').html('');
        
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: baseUrl + 'unfollow',
            type: 'POST',
            data: formData,
            success: function (data) {
                const id = $('#feed_id').val();
                $("#feedId li[feed-id=" + id + "]").remove();
                toastr.error('The feed was removed.');
                $('#follow').show();
                $('#following').hide();
            },
            error: function() {
                toastr.error('Failed to unfollow the feed.');
            }
        });
    } else {
        // 可选：用户取消时的提示
        toastr.info('Unfollow action cancelled.');
    }
});

这个方案代码量更少，不需要自定义Toastr组件，适合追求简洁的场景。

关键注意事项 #

1. CSRF Token：你的代码中已经正确处理了Laravel的CSRF验证，这一点做得很好，继续保持。
2. 错误处理：建议始终添加AJAX的error回调，处理请求失败的情况，提升用户体验。
3. Toastr配置：根据你的项目需求，可以调整Toastr的positionClass（提示框位置）、progressBar等参数，适配你的页面风格。

内容的提问来源于stack exchange，提问作者Fathima P Nizar