使用jQuery Ajax POST数据时表单字段无法提交，数据库存为NULL且报500错误

兄弟，我看你遇到的这个问题挺典型的——用Ajax提交表单时数据传不到后端，数据库存NULL还报500错误，咱们一步步拆解排查：

先从前端找问题 #

1. 表单元素有没有name属性？ #

serialize()方法是靠表单元素的name属性来生成键值对的，如果你的input只有id没有name，那序列化出来的结果就是空的！比如：

<!-- 错误示例：只有id，没有name -->
<input type="text" id="nama">

<!-- 正确示例：必须加name -->
<input type="text" id="nama" name="nama">

你可以先在Ajax请求前加个console.log($('#form-presensi').serialize())，看看控制台有没有输出类似nama=张三&nim=123的内容，如果是空的，那肯定是这个问题。

2. 按钮的默认提交行为有没有被阻止？ #

如果你的按钮是放在<form>标签里的，默认类型是submit，点击时会触发表单的默认提交（页面刷新），直接打断Ajax请求！解决方法有两个：

• 把按钮类型改成button：<button type="button" id="btn-save">提交</button>
• 在点击事件里阻止默认行为：

$('#btn-save').click(function(e){
  e.preventDefault(); // 加这一行！
  // 后面的Ajax代码...
});

3. CSRF令牌有没有带上？ #

看你用的是CodeIgniter框架，默认是开启CSRF保护的，如果请求里没有CSRF令牌，后端会直接拒绝，导致500错误。你可以这么处理：

• 要么在表单里直接加CI的CSRF字段：<?= csrf_field() ?>
• 要么在Ajax的data里手动拼接令牌：

data: $('#form-presensi').serialize() + '&<?= $this->security->get_csrf_token_name() ?>=<?= $this->security->get_csrf_hash() ?>',

再看后端的坑 #

1. 后端有没有正确接收POST数据？ #

在CodeIgniter里，要用框架提供的方法获取POST数据，别直接用$_POST（可能被过滤）：

// CI3写法
$nama = $this->input->post('nama');
// CI4写法
$nama = $this->request->getPost('nama');

如果后端拿不到数据，存进数据库自然就是NULL，甚至可能因为变量未定义抛出错误导致500。

2. 查看后端日志定位500错误 #

500错误一般是后端代码有问题，比如控制器方法不存在、数据库操作报错、语法错误等等。你可以打开CodeIgniter的日志文件（application/logs/目录下），里面会有具体的错误信息，比如是SQL语句错了，还是权限问题，一看就懂。

3. 确认路由和方法权限 #

检查site_url('transaksi/tambah_kehadiran')对应的控制器方法是否存在，有没有设置正确的访问权限，比如是不是需要登录才能访问，或者方法名拼写错了。

修正后的完整示例 #

前端代码 #

$('#btn-save').click(function(e){
  e.preventDefault(); // 阻止默认提交
  console.log($('#form-presensi').serialize()); // 验证序列化数据
  
  $.ajax({
    url: "<?= site_url('transaksi/tambah_kehadiran'); ?>",
    method: "POST",
    data: $('#form-presensi').serialize() + '&<?= $this->security->get_csrf_token_name() ?>=<?= $this->security->get_csrf_hash() ?>',
    dataType: "JSON",
    success: function(response) {
      if(response.status) {
        setTimeout(function(){
          window.location.href = "<?= site_url('transaksi/kehadiran') ?>";
        }, 1000); // 加个1秒延迟，让用户看到成功提示
      } else {
        alert('出错了：' + response.message);
      }
    },
    error: function(xhr, status, error) {
      // 打印错误详情，方便排查
      console.log('错误详情：', xhr.responseText);
      console.log('状态：', status);
      console.log('错误信息：', error);
    }
  });
});

表单HTML #

<form id="form-presensi">
  <div>
    <label> Nama:</label>
    <input type="text" name="nama" id="nama" required>
  </div>
  <div>
    <label> NIM:</label>
    <input type="text" name="nim" id="nim" required>
  </div>
  <?= csrf_field() ?> <!-- 自动生成CSRF令牌字段 -->
  <button type="button" id="btn-save">Simpan Kehadiran</button>
</form>

后端CI3控制器代码 #

public function tambah_kehadiran() {
  // 只允许POST请求
  if($this->input->server('REQUEST_METHOD') !== 'POST') {
    show_error('Method tidak diizinkan', 405);
    return;
  }

  // 获取POST数据
  $nama = $this->input->post('nama');
  $nim = $this->input->post('nim');

  // 验证数据完整性
  if(empty($nama) || empty($nim)) {
    echo json_encode(['status' => false, 'message' => 'Nama dan NIM tidak boleh kosong']);
    return;
  }

  // 插入数据库
  $data = [
    'nama' => $nama,
    'nim' => $nim,
    'tanggal' => date('Y-m-d') // 示例：加上当前日期
  ];

  $insert_result = $this->db->insert('kehadiran', $data);

  if($insert_result) {
    echo json_encode(['status' => true, 'message' => 'Kehadiran berhasil disimpan']);
  } else {
    // 可以输出数据库错误信息，方便调试
    $error = $this->db->error();
    echo json_encode(['status' => false, 'message' => 'Gagal menyimpan: ' . $error['message']]);
  }
}

按照这个步骤排查，应该能解决你的问题。

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