使用XMLHttpRequest实现AJAX时无法向服务器发送数据问题排查

你的代码存在几个关键问题，导致数据无法正常传递到服务端，以下是修正方案：

客户端代码修正 #

主要问题集中在请求格式、请求头设置以及状态判断逻辑上：

<body>
    <form>
        <label for="txtLength">Length</label>
        <input type="text" id="txtLength" name="txtLength"><br><br>
        <label for="txtWidth">Width</label>
        <input type="text" id="txtWidth" name="txtWidth"><br><br>
        <input type="button" name="Calculate" value="Calculate" onclick="calArea();">
    </form><br><br>

    <div id="showArea">Enter Values and click Calculate.</div>

    <script type="text/javascript">
        function calArea() {
            var len = document.getElementById("txtLength").value;
            var wid = document.getElementById("txtWidth").value;
            var sub = 1;

            var xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function () {
                // 修正状态判断：readyState为4（请求完成）且status为200（请求成功）
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("showArea").innerHTML = xhttp.responseText;
                }
            };

            xhttp.open("POST", "calculate_area.php", true);
            // 必须设置POST请求的Content-Type，否则PHP无法解析$_POST
            xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // 修正数据格式：使用键值对形式，和服务端接收的键名对应
            xhttp.send(`len=${encodeURIComponent(len)}&wid=${encodeURIComponent(wid)}&sub=${sub}`);
        }
    </script>
</body>

修改点说明：

• 修复了onreadystatechange中的判断逻辑：将重复的readyState改为status，确保只有请求完成且成功时才处理响应
• 添加了Content-Type请求头：POST表单提交必须设置此头，PHP才能正确解析$_POST数组
• 修正了发送数据的格式：使用键=值的URL编码格式，并用&分隔，同时用encodeURIComponent处理特殊字符，避免数据传递错误
• 移除了无用的hidden字段，直接通过JS传递sub参数

服务端代码修正 #

主要问题是参数键名匹配及缺少基本输入验证：

<?php 
print_r($_POST); // 保留用于调试，可在浏览器控制台查看请求数据
if (isset($_POST['sub']) && is_numeric($_POST['len']) && is_numeric($_POST['wid'])) {
    $len = (float)$_POST['len'];
    $wid = (float)$_POST['wid'];
    // 确保边长为正数，避免无效计算
    if ($len > 0 && $wid > 0) {
        $area = ($len * $wid) / 2;
        echo "三角形面积为：" . $area;
    } else {
        echo "边长必须为正数";
    }
}   
else{
    echo "未检测到有效输入，请输入正数边长";
}
?>

修改点说明：

• 完善了判断条件：不仅检查sub是否存在，还验证len和wid是否为数字，避免非数字导致的计算错误
• 添加了正数判断：确保输入的边长是有效正数，避免无意义的计算结果
• 优化了输出提示：让用户更清楚知道错误原因
• 保持print_r($_POST)用于调试，你可以在浏览器开发者工具的网络面板中查看服务端的响应，确认数据是否正常传递

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