使用XMLHttpRequest+POST实现表单输入姓名返回指定内容的问题

首先咱们先梳理下你当前代码里的几个核心问题：

1. 表单的默认提交行为和Ajax请求冲突了——点击提交按钮时，既触发了Ajax逻辑，又触发了表单自带的POST提交（form标签里的method和action还在生效），这会导致页面行为混乱，干扰Ajax的正常执行。
2. Ajax的POST请求写法有误：你把参数拼在了URL里，这其实是GET请求的做法，POST的参数应该放在send()方法中传递。
3. 隐藏的iframe完全多余——Ajax本身就是用来实现无刷新数据交互的，不需要用iframe来承载表单提交。

接下来给你修正后的完整可运行代码：

修正后的HTML代码 #

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>A Simple Ajax Example</title>
    <script type="text/javascript" src="xhr.js"></script>
    <script type="text/javascript" src="simpleajax.js"></script>
</head>
<body>
    <h1>Fetching data with Ajax</h1>
    <form id="nameForm">
        <label>User Name:</label>
        <input id="namefield" type="text" name="namefield">
        <input type="submit" value="Fetch">
    </form>
    <div>
        <p id="targetDiv">The fetched data will go here.</p>
    </div>
</body>
</html>

修正后的JavaScript代码（simpleajax.js） #

// 给表单绑定提交事件，替代内联onclick，更符合现代JS规范
document.getElementById('nameForm').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为，避免页面跳转
    e.preventDefault();
    // 获取输入框里的姓名
    const userName = document.getElementById('namefield').value;
    // 调用Ajax请求方法
    loadDoc(userName);
});

function loadDoc(name) {
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        // 确保请求完成且成功
        if (this.readyState === 4 && this.status === 200) {
            // 将返回内容插入到目标div中
            document.getElementById("targetDiv").innerHTML = this.responseText;
        }
    };
    // 初始化POST请求，URL不需要拼接参数
    xhttp.open("POST", "data.php", true);
    // 设置POST请求的正确请求头
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // POST参数放在send方法里，用encodeURIComponent处理特殊字符避免编码问题
    xhttp.send(`namefield=${encodeURIComponent(name)}`);
}

对应的data.php代码（需要确保这个文件存在并正确处理POST参数） #

<?php
// 只处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 安全获取姓名参数，默认值为"未知用户"
    $userName = isset($_POST['namefield']) ? trim($_POST['namefield']) : '未知用户';
    // 返回目标格式的文本
    echo "你的名字是{$userName}，对吗？";
}
?>

关键修改说明： #

• 移除冗余iframe：用Ajax实现无刷新交互，不需要iframe来承载表单提交。
• 阻止表单默认行为：通过e.preventDefault()避免传统表单跳转，只保留Ajax请求逻辑。
• 修正POST参数传递：把姓名参数放在send()中，并用encodeURIComponent()处理特殊字符，避免中文或特殊符号的编码错误。
• 事件监听替代内联onclick：这种写法更易维护，也符合现代前端开发的最佳实践。

现在测试一下：输入姓名点击Fetch按钮，targetDiv里就会正确显示你想要的消息啦。

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