CodeIgniter发起AJAX请求后success回调未触发且页面刷新问题

问题1：AJAX请求触发页面刷新 #

原因：表单内的<button>未指定type属性，浏览器默认将其识别为submit提交按钮，点击后会触发表单默认提交行为，导致页面刷新。
修复方案二选一：

• 修改表单按钮，添加type="button"属性：

  <button class="insert-btn" type="button">Insert Data</button>
  

• 在点击事件回调中阻止默认行为：

  insertBtn.on("click", function (e) {
    e.preventDefault(); // 阻止表单默认提交
    // 原有后续逻辑
  })
  

问题2：success回调不执行 #

共有三处错误共同导致该问题：

1. 表单取值错误：现有代码获取的name、email是jQuery DOM对象，不是输入框的实际值，且选择器书写错误，正确取值方式：

   // 用name属性匹配输入框，调用val()获取输入值
   const name = $(".insert-form input[name='name']").val();
   const email = $(".insert-form input[name='email']").val();
   

2. 后端响应格式不匹配：AJAX配置中指定了dataType: "json"，要求后端返回JSON格式数据，但现有控制器最后加载了视图页面，返回的是HTML内容，导致AJAX解析响应失败，不会触发success回调。修改控制器代码：

   public function insert_user () {
       $data = $this->input->post();
       $name = $data['name'];
       $email = $data['email'];
       $insertRes = $this->User_model->insert_user($name, $email);
       // 返回JSON格式响应
       echo json_encode([
           'status' => $insertRes ? 'success' : 'fail',
           'message' => $insertRes ? '插入成功' : '插入失败'
       ]);
       exit; // 终止后续输出，避免额外内容影响JSON格式
   }
   

3. 可选优化：添加error回调方便后续排查问题：

   $.ajax({
       // 原有配置不变
       error: function (xhr, err) {
           console.log('请求异常：', err);
       }
   })
   

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