jQuery AJAX请求正常但success与error回调函数均不执行怎么解决

架构老林

2026-9-28

问题说明

该ajax调用本身可以正常运行，但不会执行success或error回调函数，原代码如下：

function myFunction() {
  var Temp = document.getElementById("inputTemp").value;
  var Light = document.getElementById("inputLight").value;
  alert("Submitted");

  $.ajax({
    url: "Collector.php",
    type: "POST",
    data: {
      inputTemp: Temp,
      inputLight: Light
    },
    success: function() {
      alert("yes");
    },
    error: function() {
      alert("no");
    }
  });
}

排查和解决方法

首先确认jQuery是否正确引入：$.ajax是jQuery封装的方法，没有正确引入jQuery的话会直接报错，请求也不会发出，可在浏览器控制台查看是否有$ is not defined类的报错。
阻止表单默认提交行为：如果该函数是绑定在表单提交按钮/表单submit事件上，表单默认会刷新页面，导致ajax请求刚发出就被中断，回调无法触发。可在函数末尾添加return false，或者给函数加事件参数阻止默认行为：
```
function myFunction(e) {
  e.preventDefault();
  // 原有代码逻辑
  return false;
}
```
排查跨域问题：如果前端页面和Collector.php不在同域（域名、端口、协议任意一个不同），浏览器会拦截跨域响应，就算请求能成功发到后端，也无法触发回调。可在Collector.php开头添加跨域头测试：
```
header('Access-Control-Allow-Origin: *');
// 上线时替换*为你的前端域名，避免安全问题
```
增加错误日志定位问题：给error回调加参数，打印具体错误信息，就能快速定位问题：
```
error: function(xhr, status, errorThrown) {
  console.log('错误状态：', status);
  console.log('错误信息：', errorThrown);
  console.log('响应内容：', xhr.responseText);
  alert("no");
}
```
常见的错误原因包括后端返回的内容格式不符合预期（比如指定了json格式返回但后端返回了非json内容）、后端返回的HTTP状态码非2xx类成功码。