CodeIgniter4+Bootstrap5中AJAX新增数据出现500内部服务器错误

在使用CodeIgniter 4和Bootstrap 5开发时，通过AJAX提交新增数据请求始终返回POST http://localhost:8080/create 500 (Internal Server Error)，更换多个jQuery版本仍未解决。Chrome调试显示请求卡在AJAX起始阶段，相关代码如下：

前端代码（action.js） #

$(document).ready(function() {
    $("#save").on('submit',function(e){  
        e.preventDefault();
        const nama=$("#nama_id").val();
        const image=$("#file_id").val();
        const formdata=new FormData(this);
        if(nama == "" || image == "" ){  
            alert("Nama dan foto harus diisi");
        }
        else{  
            $.ajax({ 
                url:"/create",
                type:"POST",
                data:formdata,
                processData:false,
                contentType:false,
                success:(data)=>{
                    if(data == 1){  
                        alert("Tambah data sukses");
                    }else{  
                        alert("Tambah data gagal");
                    }
                }
            })
        }
    });

后端控制器simpan函数 #

public function simpan() {         
    $cv = $this->cvModel->getCV();
    $fileName = $this->request->getFile('file');
    if ($fileName->isValid() && ! $fileName->hasMoved()) {
        $newName = $fileName->getRandomName();
        $fileName->move("uploads/", $newName);
    }       
    $data = [
        'nama' => $cv->request->getVar('nama'),
        'pasfoto' => $newName,
    ];
    
    $simpan = $cv->save($data);
    if ($simpan) {
        echo 1;
    }else {
        echo 0;
    }
}

错误分析与修复步骤 #

• 路由映射错误：AJAX请求URL为/create，需确保路由将该POST请求指向控制器的simpan方法。在App/Config/Routes.php中添加：

  $routes->post('create', 'YourController::simpan');
  

  替换YourController为实际控制器名称。

• 模型调用逻辑错误：$cv = $this->cvModel->getCV();获取的是数据对象而非模型实例，后续$cv->request和$cv->save()均无效，修正为直接使用模型实例：

  public function simpan() {         
      $fileName = $this->request->getFile('file');
      $newName = '';
      if ($fileName->isValid() && !$fileName->hasMoved()) {
          $newName = $fileName->getRandomName();
          $fileName->move("uploads/", $newName);
      }       
      $data = [
          'nama' => $this->request->getVar('nama'),
          'pasfoto' => $newName,
      ];
      
      $simpan = $this->cvModel->save($data);
      if ($simpan) {
          echo 1;
      }else {
          echo 0;
      }
  }
  

• 未初始化变量风险：若文件上传失败，$newName未定义会触发报错，需提前初始化$newName = '';。

• 缺失AJAX错误回调：添加错误回调可获取具体错误信息，便于排查：

  $.ajax({ 
      url:"/create",
      type:"POST",
      data:formdata,
      processData:false,
      contentType:false,
      success:(data)=>{
          if(data == 1){  
              alert("Tambah data sukses");
          }else{  
              alert("Tambah data gagal");
          }
      },
      error: function(xhr, status, error) {
          console.log(xhr.responseText);
          alert("请求出错：" + error);
      }
  })
  

• 表单字段名称不匹配：确保前端文件输入框的name属性为file，与后端getFile('file')对应：

  <input type="file" id="file_id" name="file">
  

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