CodeIgniter中如何通过Ajax调用控制器并填充数据库数据至模态框表单

嘿，作为刚摸CodeIgniter的新手，这个需求太常见啦！我当初折腾了好一会儿才弄顺，给你一套完整的实现方案，从前端到后端一步步来：

1. 前端表格与模态框搭建 #

先把你的数据表格和模态框写好，重点是给每行的编辑按钮加上data-*属性，把当前行的记录数据存进去，这样点击的时候直接拿就行：

<!-- 数据表格 -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($users as $user): ?>
    <tr>
      <td><?= $user['id'] ?></td>
      <td><?= $user['name'] ?></td>
      <td>
        <!-- 编辑按钮，用data属性存用户数据 -->
        <button class="btn btn-edit" 
                data-id="<?= $user['id'] ?>" 
                data-name="<?= $user['name'] ?>">
          编辑
        </button>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

<!-- 编辑模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">编辑用户</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="editForm" method="post" action="<?= base_url('users/update') ?>">
        <div class="modal-body">
          <!-- 隐藏的ID字段，用于提交时识别要更新的记录 -->
          <input type="hidden" name="id" id="edit-id">
          <div class="form-group">
            <label>姓名</label>
            <input type="text" class="form-control" name="name" id="edit-name">
          </div>
          <div class="form-group">
            <label>密码（不修改则留空）</label>
            <input type="password" class="form-control" name="password" id="edit-password">
            <small class="text-muted">留空将保持原密码不变</small>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存修改</button>
        </div>
      </form>
    </div>
  </div>
</div>

这里密码字段加了提示，因为数据库里的密码一般是加密的，不能直接显示明文，所以让用户如果不修改就留空，后端处理的时候再判断。

2. JavaScript 填充模态框表单 #

用jQuery来监听编辑按钮的点击事件，把按钮上的data属性值填充到模态框的表单里，然后弹出模态框：

$(document).ready(function() {
  // 监听编辑按钮点击
  $('.btn-edit').click(function() {
    // 获取按钮上的用户数据
    const userId = $(this).data('id');
    const userName = $(this).data('name');
    
    // 填充到模态框表单
    $('#edit-id').val(userId);
    $('#edit-name').val(userName);
    // 密码框每次打开清空，避免遗留上次的输入
    $('#edit-password').val('');
    
    // 显示模态框
    $('#editModal').modal('show');
  });
});

这段代码很直观，点击按钮就把对应的数据塞到表单里，密码框每次清空是为了避免用户上次输入的内容残留。

3. CodeIgniter 后端处理更新 #

接下来写控制器和模型的代码，处理表单提交的更新请求：

控制器（比如Users.php） #

<?php
class Users extends CI_Controller {
  public function __construct() {
    parent::__construct();
    $this->load->model('User_model');
    $this->load->helper('url');
    $this->load->library('form_validation');
    $this->load->library('session'); // 加载session库用于提示信息
  }

  // 显示用户列表页面（就是你的表格页面）
  public function index() {
    $data['users'] = $this->User_model->get_all_users();
    $this->load->view('users/index', $data);
  }

  // 处理更新请求
  public function update() {
    if ($this->input->post()) {
      // 表单验证
      $this->form_validation->set_rules('name', '姓名', 'required');
      // 密码不是必填，所以只验证如果填了就符合规则
      $this->form_validation->set_rules('password', '密码', 'min_length[6]|trim');

      if ($this->form_validation->run() == TRUE) {
        $user_id = $this->input->post('id');
        $update_data = [
          'name' => $this->input->post('name')
        ];

        // 如果密码字段不为空，才更新密码（记得加密！）
        if (!empty($this->input->post('password'))) {
          $update_data['password'] = password_hash($this->input->post('password'), PASSWORD_DEFAULT);
        }

        // 调用模型更新数据
        if ($this->User_model->update_user($user_id, $update_data)) {
          // 更新成功，跳回列表页并提示
          $this->session->set_flashdata('success', '用户信息更新成功！');
          redirect('users');
        } else {
          $this->session->set_flashdata('error', '更新失败，请重试！');
          redirect('users');
        }
      } else {
        // 验证失败，返回列表页提示
        $this->session->set_flashdata('error', validation_errors());
        redirect('users');
      }
    }
  }
}

模型（比如User_model.php） #

<?php
class User_model extends CI_Model {
  // 获取所有用户
  public function get_all_users() {
    return $this->db->get('users')->result_array();
  }

  // 更新用户
  public function update_user($user_id, $data) {
    $this->db->where('id', $user_id);
    return $this->db->update('users', $data);
  }
}

小提示 #

• 可以在config/autoload.php里把session、form_validation这些常用库设置为自动加载，省得每次控制器都手动加载。
• 如果你的项目用了其他密码加密方式，把password_hash换成你项目里对应的加密逻辑就行。
• 要是没用到Bootstrap的模态框，自己调整模态框的显示/隐藏逻辑就行，核心的JS填充数据逻辑是通用的。

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