CodeIgniter通过AJAX调用控制器加购功能失效、页面自动刷新如何解决

问题原因 #

• 没有阻止表单的默认提交行为：点击submit按钮后表单会触发默认的页面提交重载，AJAX请求还未执行完成页面就刷新了，这是页面直接重载的核心原因。
• 控制器逻辑不兼容AJAX请求：原有控制器最后执行的redirect($_SERVER['HTTP_REFERER'])会返回302重定向响应，AJAX无法处理这类重定向，也不会执行后续的购物车逻辑返回可用结果。
• DOM选择器匹配错误：HTML中结果容器是class="resultdiv"，JS中用了ID选择器$('#resultdiv')，就算请求成功也无法将结果渲染到正确位置。
• 原有flashdata逻辑不适用于AJAX：flashdata是给页面跳转后展示提示用的，异步请求下无法直接读取flashdata的内容。

修改方案 #

1 前端JS代码修改 #

$("#change").submit(function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  var id = $('#prod').val();
  $.ajax({
    type: 'POST',
    url: "<?php echo base_url(); ?>" + "index.php/homecontroller/buy/" + id,
    data: {
      'id': id
      // 后续如果需要传color、size参数，在此处补充即可
    },
    dataType: 'json',
    success: function(res) {
      // 类选择器用.而不是#
      $('.resultdiv').html(res.msg);
    }
  });
});

2 控制器代码修改 #

增加AJAX请求判断，异步请求下直接返回JSON结果，不执行重定向，兼容原有同步提交逻辑：

public function buy($id)
{
  $color= $this->input->post('color');
  $size=$this->input->post('size');
  $product = $this->product->find($id);
  $item = array(
      'id' => $product->id,
      'name' => $product->pname,
      'quantity' => 1
  );
  $res = [];
  if(!$this->session->has_userdata('cart')) {
      $cart = array($item);
      $this->session->set_userdata('cart', serialize($cart));
      $res['code'] = 1;
      $res['msg'] = "Product Added To Cart Successfully !";
  } else {
      $index = $this->exists($id);
      $cart = array_values(unserialize($this->session->userdata('cart')));
      if($index == -1) {
          array_push($cart, $item);
          $this->session->set_userdata('cart', serialize($cart));
          $res['code'] = 1;
          $res['msg'] = "Product Added To Cart Successfully !";
      } else {
          $res['code'] = 0;
          $res['msg'] = "Product Already In Cart !";
      }
  }
  // 判断是否为AJAX请求
  if($this->input->is_ajax_request()){
      echo json_encode($res);
      exit;
  }
  // 非AJAX请求保留原有逻辑
  $this->session->set_flashdata($res['code'] == 1 ? "Success" : "Error", $res['msg']);
  redirect($_SERVER['HTTP_REFERER']);
}

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