使用JavaScript调用PHP函数时$_POST返回空值的问题

首先得指出你当前代码里的几个核心问题，这些是导致你需求没实现的原因：

• 你在提交按钮的onclick里直接写<?php thankyou();?>，这是服务器端和客户端代码混淆了——PHP是页面加载时在服务器运行的，这时候用户还没提交表单，$_POST['name']根本不存在，不仅会报错，而且JS拿到的是页面加载时就生成的内容，不是提交后的结果。
• 表单action设为action.php，提交后会直接跳转到这个页面，自然没法在原页面替换表单内容。
• 邮箱输入框的name属性多了个冒号：name="email:"，这会导致PHP拿不到邮箱值（虽然你当前需求是显示姓名，但也是个需要修正的小问题）。

下面给你两种可行的解决方案，覆盖纯PHP和JavaScript（AJAX）两种场景：

方案1：纯PHP实现（简单直接，无需JS） #

这种方式让表单提交到当前页面，用PHP判断是否有POST请求，决定显示表单还是感谢信息，完全不需要页面跳转。

修改后的主页面（比如命名为contact.php）代码：

<!DOCTYPE html>
<html>
<head>
<title> My Profile</title>
<meta name="robots" content="noindex">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="contact">
<?php
// 判断是否是表单提交请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取用户姓名，用htmlspecialchars过滤防止XSS攻击
    $name = htmlspecialchars($_POST['name'] ?? 'Guest');
    echo "<p>Thank you $name! Your message has been submitted.</p>";
} else {
    // 未提交时显示表单
?>
<form class="form contact" id="contact-form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
Name: <br>
<input type="text" class="field" name="name" required><br>
Number:<br>
<input type="text" class="field" name="number"><br>
Email:<br>
<input type="email" class="field" name="email"><br>
<br>
<input type="submit" class="submit" name="submit" value="Submit">
</form>
<?php } ?>
</div>
</body>
</html>

这里的关键细节：

• 用$_SERVER['REQUEST_METHOD'] === 'POST'精准判断表单提交动作
• htmlspecialchars()是必须的，防止用户输入恶意脚本（XSS攻击）
• 表单action设为$_SERVER['PHP_SELF']，提交到当前页面，不需要额外的action.php
• 给姓名输入框加了required属性，确保用户填写（可选，根据你的需求调整）

方案2：JavaScript + AJAX实现（无刷新提交） #

如果你想要页面不刷新，直接在原位置替换表单内容，就可以用AJAX来实现——这就是JavaScript支持的用法，通过异步请求发送表单数据，再用JS更新页面内容。

主页面代码：

<!DOCTYPE html>
<html>
<head>
<title> My Profile</title>
<meta name="robots" content="noindex">
<link rel="stylesheet" type="text/css" href="style.css">
<script>
// 页面加载完成后绑定表单提交事件
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contact-form');
    form.addEventListener('submit', function(e) {
        // 阻止表单默认跳转行为
        e.preventDefault();
        
        // 收集表单数据
        const formData = new FormData(form);
        
        // 发送AJAX请求到处理脚本
        fetch('action.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            // 请求成功后，用返回的感谢信息替换表单
            form.innerHTML = data;
        })
        .catch(error => {
            // 请求失败时显示错误提示
            console.error('提交出错:', error);
            form.innerHTML = '<p>Oops, 提交失败了，请重试。</p>';
        });
    });
});
</script>
</head>
<body>
<div class="contact">
<form class="form contact" id="contact-form" method="POST">
Name: <br>
<input type="text" class="field" name="name" required><br>
Number:<br>
<input type="text" class="field" name="number"><br>
Email:<br>
<input type="email" class="field" name="email"><br>
<br>
<input type="submit" class="submit" name="submit" value="Submit">
</form>
</div>
</body>
</html>

对应的action.php需要修改成这样：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = htmlspecialchars($_POST['name'] ?? 'Guest');
    echo "Thank you $name! Your message has been submitted.";
} else {
    // 如果直接访问action.php，返回错误提示
    echo "无效的请求。";
}
?>

这个方案的优势是用户体验更好，页面不会刷新，完全在前端完成内容替换。

最后总结：JavaScript当然支持你的需求，但需要用AJAX异步请求的方式，而不是直接在onclick里调用PHP函数（两者运行环境和时机完全不同）。如果不需要无刷新，纯PHP的方式更简单省心。

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