AJAX提交状态更新按钮时被重定向，如何实现无重定向更新？

当然可以实现无重定向的状态更新啦！这种情况大多是因为没阻止表单的默认提交行为，或者AJAX配置出了问题，我给你一步步拆解解决方案：

1. 先阻止表单的默认提交行为 #

如果你的状态更新按钮是嵌套在表单里的，点击时浏览器会自动触发表单提交，这就是导致重定向的元凶！所以第一步要把这个默认行为拦住：

假设你的HTML结构是这样的：

<form id="statusUpdateForm" action="<?= base_url().'/Admin/Jobs/' ?>" method="post">
  <input type="hidden" name="job_id" value="123"> <!-- 示例任务ID -->
  <input type="hidden" name="new_status" value="completed"> <!-- 要更新的状态 -->
  <button type="submit" id="updateStatusBtn">更新状态</button>
</form>

对应的JavaScript代码要加上阻止默认行为的逻辑：

document.getElementById('updateStatusBtn').addEventListener('click', function(e) {
  // 阻止表单默认提交跳转
  e.preventDefault();
  
  // 调用AJAX更新函数
  submitStatusUpdate();
});

2. 编写正确的AJAX请求逻辑 #

接下来写核心的AJAX请求，确保请求完成后只更新页面内容，不会触发跳转：

function submitStatusUpdate() {
  const form = document.getElementById('statusUpdateForm');
  const formData = new FormData(form); // 自动收集表单数据
  
  fetch(form.action, {
    method: form.method,
    body: formData,
    // 如果你的后端框架（比如CodeIgniter）需要CSRF令牌，记得加上这行
    headers: {
      'X-CSRF-Token': '<?= csrf_hash() ?>'
    }
  })
  .then(response => response.json()) // 假设后端返回JSON格式的响应
  .then(data => {
    if (data.success) {
      // 更新页面上的状态展示，比如修改按钮文字或状态标签
      document.getElementById('updateStatusBtn').textContent = '状态已更新';
      // 给用户弹出成功提示
      alert('状态更新成功！');
    } else {
      alert('更新失败：' + (data.message || '未知错误'));
    }
  })
  .catch(error => {
    console.error('请求出错：', error);
    alert('更新失败，请稍后重试');
  });
}

3. 后端代码也要配合调整 #

你的后端Admin/Jobs方法处理完更新后，绝对不能做重定向，要返回JSON格式的响应，这样前端才能正确处理：

以CodeIgniter为例，后端代码可以这么写：

public function index() {
  // 判断是否是AJAX请求
  if ($this->input->is_ajax_request()) {
    $job_id = $this->input->post('job_id');
    $new_status = $this->input->post('new_status');
    
    // 执行数据库更新逻辑（这里假设你有对应的模型方法）
    $update_success = $this->job_model->update_job_status($job_id, $new_status);
    
    // 返回JSON响应
    if ($update_success) {
      echo json_encode(['success' => true, 'message' => '状态更新成功']);
    } else {
      echo json_encode(['success' => false, 'message' => '数据库更新失败']);
    }
    exit; // 一定要exit，避免执行后续可能导致重定向的代码
  }
  
  // 非AJAX请求的正常页面逻辑（如果有的话）
  // ...
}

常见问题排查 #

• 打开浏览器控制台（F12），看看有没有JavaScript错误，比如找不到元素、请求报错等
• 确认后端确实接收到了AJAX请求，并且返回了格式正确的JSON
• 检查CSRF令牌是否正确传递，很多PHP框架都要求这个才能处理POST请求

这样调整后，点击更新按钮就能在后台完成状态更新，页面完全不会跳转，还能给用户清晰的反馈哦~

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