本文介绍两种不刷新页面、不跳转至后端PHP脚本的表单提交方式：一是通过空 action 属性实现静默提交（需配合JavaScript处理），二是使用 event.preventDefault() 阻止默认提交行为并结合AJAX异步提交数据。
本文介绍两种不刷新页面、不跳转至后端php脚本的表单提交方式：一是通过空 `action` 属性实现静默提交（需配合javascript处理），二是使用 `event.preventdefault()` 阻止默认提交行为并结合ajax异步提交数据。
在传统HTML表单中，点击 <button type="submit"> 会触发浏览器默认行为：将数据按 method（如 POST）发送至 action 指定的URL（如 functionality/app_details.php），随后整页跳转或刷新——这正是您遇到“表单提交后跳转到后端页面”的原因。若目标是仅提交数据、不跳转、不刷新页面，必须阻止浏览器默认提交流程，改用前端控制的数据提交方式。
✅ 方案一：使用 event.preventDefault() 阻止默认行为（推荐）
为表单添加唯一 id（如 id="appForm"），并通过 JavaScript 监听提交事件，在回调中调用 event.preventDefault() 取消跳转，再通过 fetch() 或 XMLHttpRequest 异步提交：
<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>document.getElementById("appForm").addEventListener("submit", function(event) {
event.preventDefault(); // ✅ 关键：阻止页面跳转和刷新
const formData = new FormData(this);
fetch("functionality/app_details.php", {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
console.log("Success:", data);
alert("Data submitted successfully!");
})
.catch(error => {
console.error("Error:", error);
alert("Submission failed. Please try again.");
});
});⚠️ 注意事项：
- 确保后端 app_details.php 返回有效的 JSON（如 header('Content-Type: application/json'); echo json_encode(['status' => 'success']);），否则 .json() 解析会失败；
- 若表单含文件上传，FormData 自动处理编码，无需手动设置 Content-Type；
- 不要将 action 设为空字符串（action=""）再依赖 preventDefault()，因空 action 会导致提交到当前页面URL，易引发意外重载。
✅ 方案二：移除 action 并纯JS驱动（进阶可控）
若完全放弃传统表单提交语义，可移除 action 和 method，改用按钮 type="button" + 手动收集字段值：
<form id="appForm"> <!-- 同上表单结构 --> <button type="button" class="btn btn-outline-danger" onclick="submitAppDetails()">Submit</button> </form>
function submitAppDetails() {
const payload = {
name: document.getElementById("inputName").value,
Fname: document.getElementById("inputFname").value,
Mname: document.getElementById("inputMname").value
};
fetch("functionality/app_details.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
})
.then(r => r.json())
.then(console.log)
.catch(console.error);
}? 提示：此方式更灵活（支持复杂校验、加载状态、错误反馈），但需确保后端能解析 JSON 请求体（file_get_contents('php://input')）。
总结
- 根本原因：浏览器默认提交行为强制导航，无法避免跳转；
- 核心解法：用 event.preventDefault() 中断默认流程，再用 fetch/XMLHttpRequest 异步通信；
- 最佳实践：为表单添加 id，绑定 submit 事件监听器，统一处理验证、提交与反馈；
- 务必测试：检查网络面板（DevTools → Network）确认请求发出且响应正常，避免因路径错误（如反斜杠 \ 在URL中无效）导致404。
这样，您的表单就能安静地提交数据，用户停留在原页面，体验更流畅、专业。
