PHP表单点击Submit提交后跳转后端页面 如何实现无跳转提交

HTML原生表单默认采用同步提交机制，提交后会自动跳转到action属性指定的后端处理页，要实现静默提交数据、不跳转、无弹窗提示，使用AJAX异步提交即可，后端functionality/app_details.php的原有数据接收、处理逻辑无需修改。

代码修改 #

直接将原有表单代码替换为以下版本即可：

<form id="appForm" action="functionality/app_details.php" method="post">
    <!-- Name -->
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">Name</span>
        </div>
        <input type="text" name="name" class="form-control" id="inputName" placeholder="Enter name">
    </div>
    <!-- Parent's name -->
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">Parent's Name</span>
        </div>
        <input type="text" name="Fname" id="inputFname" class="form-control" placeholder="Enter Father's Name">
        <input type="text" name="Mname" id="inputMname" class="form-control" placeholder="Enter Mother's Name">
    </div>
    <button type="submit" class="btn btn-outline-danger">submit</button>
</form>

<script>
document.getElementById('appForm').addEventListener('submit', function(e) {
    // 阻止表单默认跳转提交行为
    e.preventDefault();
    // 自动收集表单内所有字段数据
    const formData = new FormData(this);
    // 异步发送数据到后端，无跳转无提示
    fetch(this.action, {
        method: 'POST',
        body: formData
    }).catch(err => {
        // 仅控制台打印异常，不触发任何用户可见的提示
        console.error('提交异常：', err);
    });
})
</script>

说明 #

• 原action路径中的反斜杠\已替换为正斜杠/，兼容Windows、Linux服务器的路径解析规则，避免路径报错
• 代码未添加任何成功弹窗、页面跳转逻辑，数据提交完成后用户始终停留在当前表单页
• 后端无需做任何调整，原有通过$_POST获取name/Fname/Mname参数的逻辑可以正常运行
• 上述脚本采用原生JS编写，不需要额外引入jQuery等第三方库，兼容所有主流现代浏览器

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