使用XMLHttpRequest提交POST数据时，仅加alert才生效的问题排查

这是因为你用了异步XMLHttpRequest请求（open方法第三个参数是true），send()调用后不会等待服务器返回响应，会直接执行后面的document.getElementById("feedback").innerHTML = xmlhttp.responseText;，这时候服务器还没返回数据，所以responseText是空的。而alert()会阻塞代码执行，给了服务器足够的时间完成请求并返回结果，所以alert存在时能拿到正确的responseText。

正确写法：用回调处理响应 #

你需要把读取响应的逻辑放到XMLHttpRequest的回调事件里，等请求完成后再操作responseText，以下是两种常用实现方式：

方法1：使用onload事件（现代浏览器推荐） #

function submit_cost_code() {
  var costCode = document.getElementById("cost-code").value;
  var xmlhttp = new XMLHttpRequest();
  var url = 'process-cost-code.php';
  // 注意：如果成本代码含特殊字符（如&、空格），必须用encodeURIComponent编码
  var params = 'cost-code=' + encodeURIComponent(costCode);
  
  xmlhttp.open('POST', url, true);
  xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  
  // 请求成功完成时触发
  xmlhttp.onload = function() {
    if (this.status >= 200 && this.status < 300) {
      document.getElementById("feedback").innerHTML = this.responseText;
    } else {
      document.getElementById("feedback").innerHTML = "请求失败，请重试";
    }
  };
  
  // 处理网络错误
  xmlhttp.onerror = function() {
    document.getElementById("feedback").innerHTML = "网络错误，请检查连接";
  };
  
  xmlhttp.send(params);
}

方法2：使用onreadystatechange事件（兼容旧浏览器） #

function submit_cost_code() {
  var costCode = document.getElementById("cost-code").value;
  var xmlhttp = new XMLHttpRequest();
  var url = 'process-cost-code.php';
  var params = 'cost-code=' + encodeURIComponent(costCode);
  
  xmlhttp.open('POST', url, true);
  xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  
  xmlhttp.onreadystatechange = function() {
    // readyState=4表示请求完成，status=200表示响应正常
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      document.getElementById("feedback").innerHTML = xmlhttp.responseText;
    } else if (xmlhttp.readyState === 4) {
      document.getElementById("feedback").innerHTML = "请求失败，状态码：" + xmlhttp.status;
    }
  };
  
  xmlhttp.send(params);
}

额外优化提示 #

• 必须用encodeURIComponent()处理costCode，否则特殊字符会导致参数传递错误。
• 添加错误处理逻辑，覆盖网络异常、服务器报错等场景，提升用户体验。

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