PHP表单提交避免页面刷新：即时显示表单值的实现咨询

嘿，这个问题我太熟啦！你现在的表单用的是默认的同步提交方式，所以一点击提交按钮，浏览器就会刷新页面重新加载。要实现不刷新页面就能即时显示表单值，咱们得靠AJAX异步提交来搞定，下面给你完整的可运行方案：

<!DOCTYPE html>
<html>
<head>
    <title>即时显示表单提交值</title>
</head>
<body>
    <!-- 表单部分，JS会接管提交逻辑，可省略action和method -->
    <form id="myform">
        First name: <input type="text" name="FirstName" value="Mickey"><br>
        Last name: <input type="text" name="LastName" value="Mouse"><br>
        <button type="submit">提交</button>
    </form>

    <!-- 专门用来显示结果的区域 -->
    <div id="result" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>

    <script>
        // 获取表单和结果显示区的DOM元素
        const form = document.getElementById('myform');
        const resultArea = document.getElementById('result');

        // 监听表单的提交事件
        form.addEventListener('submit', function(event) {
            // 关键！阻止浏览器默认的表单提交刷新行为
            event.preventDefault();

            // 自动收集表单里的所有数据
            const formData = new FormData(this);

            // 用原生fetch发送异步POST请求到当前页面
            fetch(window.location.href, {
                method: 'POST',
                body: formData
            })
            .then(response => response.text()) // 解析返回的文本内容
            .then(data => {
                // 把PHP返回的结果显示到页面上
                resultArea.innerHTML = data;
            })
            .catch(error => {
                // 处理请求出错的情况
                resultArea.innerHTML = `提交失败：${error.message}`;
            });
        });
    </script>

    <?php
    // 只在POST请求时处理表单数据
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        // 获取表单值，用htmlspecialchars防止XSS攻击
        $firstName = isset($_POST['FirstName']) ? htmlspecialchars($_POST['FirstName']) : '未填写';
        $lastName = isset($_POST['LastName']) ? htmlspecialchars($_POST['LastName']) : '未填写';

        // 输出要显示的内容
        echo "<strong>你提交的信息：</strong><br>";
        echo "名字：{$firstName}<br>";
        echo "姓氏：{$lastName}";

        // 这里一定要exit，避免把页面其他HTML代码也返回给AJAX请求
        exit;
    }
    ?>
</body>
</html>

• 阻止默认提交：用event.preventDefault()让浏览器不再执行默认的页面刷新提交逻辑，这是实现无刷新的核心第一步。
• 异步请求：用fetch（原生JS API）发送POST请求，不需要依赖任何第三方库，数据提交和返回都在后台悄悄进行，页面完全不会刷新。
• PHP处理逻辑：通过$_SERVER['REQUEST_METHOD'] === 'POST'判断是否是AJAX的POST请求，处理完数据后用exit终止脚本，避免把页面的HTML结构也返回给AJAX。
• 安全处理：用htmlspecialchars()转义用户输入的内容，防止XSS攻击，这是处理用户输入的好习惯哦。

如果你习惯用jQuery的话，也可以把JS部分换成更简洁的写法：

$(document).ready(function() {
    $('#myform').submit(function(e) {
        e.preventDefault();
        $.post('', $(this).serialize(), function(data) {
            $('#result').html(data);
        });
    });
});

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