如何通过AJAX向PHP脚本传值并返回结果至表单？接收结果异常求助

让我来帮你解决这个问题，我看了你的代码后发现几个关键问题，导致你无法正确获取并填充计算结果：

问题分析 #

• 传递固定值而非用户输入：按钮点击时调用CalcForm('5','3','4')，传的是硬编码的固定值，不是用户在输入框中填写的实际数据，PHP永远只会收到5、3、4这三个数。
• 错误的输入框赋值方式：你用innerHTML给<input>元素赋值，但表单输入控件的内容是通过value属性控制的，innerHTML对它不起作用。
• PHP只返回单个值：当前PHP仅输出$r_volume，没有返回$n_heaters，无法同时填充两个只读字段。

修改后的完整代码 #

1. HTML部分（修正按钮调用逻辑） #

<div id="CalcForm" class="mt-5" >
  <div class="row">
    <div class="col-sm">
      <div class="form-group mb-4">
        <label>Length(m)</label>
        <input type="text" id="length" name="length" placeholder="ex. 4.5" class="form-control">
      </div>
    </div>
    <div class="col-sm">
      <div class="form-group mb-4">
        <label>Height(m)</label>
        <input type="text" id="height" name="height" placeholder="ex. 2.5" class="form-control">
      </div>
    </div>
    <div class="col-sm">
      <div class="form-group mb-4">
        <label>Width(m)</label>
        <input type="text" id="width" name="width" placeholder="ex. 3.5" class="form-control">
      </div>
    </div>
  </div>
  <div class="col-12 mb-4">
    <!-- 移除固定参数，让函数自行获取输入值 -->
    <button name="submit" class="btn btn-primary" onclick="CalcForm()">Send!</button>
  </div>
  <div class="row">
    <div class="col">
      <label>Room volume:</label>
      <input type="text" class="form-control" id="r_volume" readonly>
    </div>
    <div class="col">
      <label>Number of heaters:</label>
      <input type="text" class="form-control" id="n_heaters" readonly>
    </div>
  </div>
</div>

2. Ajax脚本（修正参数获取、赋值方式与数据解析） #

<script>
function CalcForm() {
  // 获取用户输入的实际值
  const length = document.getElementById("length").value.trim();
  const height = document.getElementById("height").value.trim();
  const width = document.getElementById("width").value.trim();

  // 非空验证（确保三个字段都有值）
  if (length === "" || height === "" || width === "") {
    alert("请填写所有尺寸字段！");
    return;
  }

  // 验证是否为数字（可选但推荐）
  if (isNaN(length) || isNaN(height) || isNaN(width)) {
    alert("请输入有效的数字！");
    return;
  }

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 解析PHP返回的JSON数据
      const result = JSON.parse(this.responseText);
      // 用value属性给输入框赋值
      document.getElementById("r_volume").value = result.r_volume;
      document.getElementById("n_heaters").value = result.n_heaters;
    }
  };
  // 拼接请求参数（用encodeURIComponent防止特殊字符问题）
  const url = `calculator.php?length=${encodeURIComponent(length)}&height=${encodeURIComponent(height)}&width=${encodeURIComponent(width)}`;
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}
</script>

3. PHP脚本（返回JSON格式的两个计算结果） #

<?php
// 先检查参数是否存在
if (isset($_REQUEST["length"], $_REQUEST["height"], $_REQUEST["width"])) {
  $length = (float)$_REQUEST["length"];
  $height = (float)$_REQUEST["height"];
  $width = (float)$_REQUEST["width"];

  $r_volume = $length * $height * $width;
  $n_heaters = ceil($r_volume / 20);

  // 返回JSON格式的数据
  echo json_encode([
    'r_volume' => $r_volume,
    'n_heaters' => $n_heaters
  ]);
} else {
  // 参数缺失时返回错误信息
  echo json_encode(['error' => '缺少必要参数']);
}
?>

额外优化说明 #

• 新增了数字验证，防止用户输入非数字内容导致计算错误。
• 使用encodeURIComponent处理参数，避免特殊字符（比如空格、小数点）引发的请求错误。
• PHP新增了参数存在性检查，增强代码健壮性。

现在点击按钮后，就能正确获取用户输入的尺寸，计算房间体积和所需加热器数量，并自动填充到两个只读字段中了。

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