JavaScript变量无响应：聊天应用注册页数据发送失败排查

你的代码存在几个关键问题，导致无法正常发送数据并获取响应：

1. send_data函数参数缺失 #

调用send_data(data, "signup")时传入了两个参数，但函数定义仅接收一个data参数，导致type变量未定义。修改函数定义：

function send_data(data, type) { // 新增type参数
  // ... 原有代码
}

2. XMLHttpRequest逻辑顺序完全颠倒 #

当前把xml.open()、xml.send()放在了onload回调内部，这意味着只有请求完成后才会执行发送请求的代码，逻辑完全错误。必须先配置请求、发送请求，再在onload里处理响应：

function send_data(data, type) {
  var xml = new XMLHttpRequest();

  xml.onload = function() {
    if (xml.readyState === 4 && xml.status === 200) { // 需同时满足请求完成且HTTP状态成功
      alert(xml.responseText);
    }
  };

  // 先处理数据，再发送请求
  data.data_type = type;
  var data_string = JSON.stringify(data);

  // 设置请求头，告知后端数据格式为JSON
  xml.setRequestHeader("Content-Type", "application/json");
  xml.open("POST", "api.php", true);
  xml.send(data_string); // 发送JSON字符串，而非原对象
}

3. 状态判断逻辑错误 #

原代码中xml.readyState == 4 || xml.status == 200应改为&&，需同时满足请求完成（readyState=4）和HTTP状态码成功（200），否则会在请求未完成时就触发逻辑。

4. 发送数据格式问题 #

直接发送data对象会导致后端无法正确解析，必须发送JSON.stringify转换后的字符串，同时配合Content-Type请求头。

额外优化建议 #

• 简化表单数据收集逻辑，减少冗余代码：

var data = {};
for (var i = inputs.length - 1; i >= 0; i--) {
  var key = inputs[i].name;
  if (key === "gender") {
    if (inputs[i].checked) {
      data.gender = inputs[i].value;
    }
  } else {
    data[key] = inputs[i].value;
  }
}

• 监听表单submit事件，支持回车提交：

var myform = _("myform");
myform.addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止默认表单跳转
  collect_data();
});

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