如何通过公共方法与模态框按钮实现CodeIgniter系统退出登录？

问题分析 #

当前模态框的OK按钮使用<button>标签并添加了href属性，但<button>本身不支持href属性，因此无法触发logout方法。下面提供两种可行的实现方案：

方案一：表单提交（简单直接） #

这种方式无需JS，通过表单提交触发logout方法，适合不需要异步提示的场景：

1. 修改模态框OK按钮代码 #

将原按钮包裹在表单中，指定表单的提交地址为logout方法：

<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logoutModalLabel">Are you sure you want to log out?</h5>
            </div>
            <div class="modal-footer">
                <div class="col s2" style="float: center">
                    <!-- 用表单包裹按钮 -->
                    <form action="<?php echo base_url('index.php/login/logout'); ?>" method="post">
                        <button type="submit" class="btn btn-danger col s6 modal-close waves-effect waves-green btn-flat yes">OK</button>
                    </form>
                </div>
                <div class="col s2" style="float: center">
                    <button class="btn btn-secondary" data-bs-dismiss="modal" class="col s6 modal-close waves-effect waves-green btn-flat no">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

2. 修改Login控制器的logout方法 #

表单提交后不需要返回JSON，直接销毁会话并跳转到登录页：

public function logout()
{
    $this->session->sess_destroy(); // 销毁会话
    redirect('index.php/login'); // 跳转到登录页面
}

方案二：AJAX异步请求（带提示反馈） #

这种方式通过JS发送异步请求，适合需要显示退出成功提示后再跳转的场景：

1. 修改模态框OK按钮 #

给按钮添加唯一ID，移除无效的href属性：

<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logoutModalLabel">Are you sure you want to log out?</h5>
            </div>
            <div class="modal-footer">
                <div class="col s2" style="float: center">
                    <button id="logoutBtn" class="btn btn-danger col s6 modal-close waves-effect waves-green btn-flat yes">OK</button>
                </div>
                <div class="col s2" style="float: center">
                    <button class="btn btn-secondary" data-bs-dismiss="modal" class="col s6 modal-close waves-effect waves-green btn-flat no">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

2. 添加AJAX请求代码 #

在页面底部引入JS代码（假设项目已加载jQuery，Vuexy框架默认包含）：

<script>
$(document).ready(function() {
    $('#logoutBtn').click(function() {
        $.ajax({
            url: '<?php echo base_url('index.php/login/logout'); ?>',
            type: 'POST',
            dataType: 'json',
            // 如果开启了CSRF防护，需要添加token（可选）
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(res) {
                if (res.status) {
                    // 可替换为Vuexy的通知组件（如toast）
                    alert(res.msg);
                    // 跳转到登录页
                    window.location.href = '<?php echo base_url('index.php/login'); ?>';
                }
            },
            error: function() {
                alert('退出失败，请稍后重试');
            }
        });
    });
});
</script>

3. （可选）添加CSRF元标签 #

如果CodeIgniter开启了CSRF防护，在页面<head>中添加：

<meta name="csrf-token" content="<?php echo $this->security->get_csrf_hash(); ?>">

4. 保留原logout方法 #

此方案下原logout方法无需修改，返回的JSON会被AJAX接收处理：

public function logout()
{
    $this->session->sess_destroy(); // Destroy the session
    $res['msg'] = "Logout Success";
    $res['status'] = true;
    echo json_encode($res);
}

注意事项 #

1. 确保CodeIgniter的config.php中已正确配置base_url，否则base_url()函数无法生成正确的地址。
2. 如果使用方案二，需确认项目中已加载jQuery，或改用原生JS实现AJAX。

内容的提问来源于stack exchange，提问作者M Farhan Salim