引言：无刷新表单提交的必要性
在现代 web 应用中，用户体验至关重要。传统的 html 表单提交方式会导致整个页面刷新，这不仅中断了用户操作流程，也可能造成不必要的等待时间。通过结合使用 php 和 ajax（asynchronous javascript and xml），我们可以实现无刷新表单提交，即在不重新加载页面的情况下，将表单数据发送到服务器进行处理，并在成功或失败后向用户显示即时反馈，例如弹窗通知。
理解问题：为何页面会自动刷新？
最初尝试使用 AJAX 提交表单时，尽管 JavaScript 的 alert() 提示成功，但页面仍然会自动刷新或重定向。这是因为浏览器对 HTML 表单有默认的提交行为。当一个
PHP 路由配置示例 (routes.php)：
立即学习“PHP免费学习笔记（深入）”；
// ... 其他路由
// 报告表单提交路由
post('/form-process', '/backend/form-process.php');初步尝试的 AJAX 代码：
$(document).ready(function() {
$("#reportsForm").submit(function() {
var cccEmployee = $("#ccc_employee").val();
var irNumber = $("#IR_number").val();
// ... 收集其他表单字段
$.ajax({
type: "POST",
url: "./backend/form-process.php", // AJAX 请求的目标 URL
success: function() {
alert("提交成功！"); // 弹窗提示
}
});
// 问题在于，即使 AJAX 请求被发送，浏览器的默认表单提交行为依然会发生
});
});在这种情况下，alert("提交成功！") 可能会短暂显示，但随后页面会立即刷新或跳转到 form-process 路由处理后的页面，导致用户体验不佳。
核心解决方案：阻止默认事件 event.preventDefault()
要解决页面刷新问题，关键在于阻止浏览器对表单的默认提交行为。在 jQuery 的 submit 事件处理函数中，我们可以通过传入事件对象并调用其 preventDefault() 方法来实现。
修改后的 AJAX 代码如下：
$(document).ready(function() {
$("#reportsForm").submit(function(e) { // 传入事件对象 'e'
e.preventDefault(); // 阻止表单的默认提交行为
// ... 后续的 AJAX 逻辑
var cccEmployee = $("#ccc_employee").val();
var irNumber = $("#IR_number").val();
var caseType = $("#case_type").val();
var caseLocation = $("#caseLocation").val();
var startDateTime = $("#startDate").val();
var endDateTime = $("#endDate").val();
var caseDesc = $("#case_description").val();
var actionsTaken = $("#action_taken").val();
var caseDetails = $("#details").val();
var caseNotes = $("#notes").val();
var caseRecommendation = $("#recommendation").val();
$.ajax({
type: "POST",
url: "./backend/form-process.php", // AJAX 请求的目标 URL
data: { // 关键：通过 'data' 属性发送表单数据
ccc_employee: cccEmployee,
ir_number: irNumber,
case_type: caseType,
case_location: caseLocation,
start_date_time: startDateTime,
end_date_time: endDateTime,
case_desc: caseDesc,
actions_taken: actionsTaken,
case_details: caseDetails,
case_notes: caseNotes,
case_recommendation: caseRecommendation
},
success: function(response) {
// 根据服务器响应处理成功逻辑
console.log("服务器响应：", response);
if (response.status === 'success') {
showCustomNotification(response.message, 'success');
// 可选：清空表单或重定向
// $("#reportsForm")[0].reset();
} else {
showCustomNotification(response.message, 'error');
}
},
error: function(xhr, status, error) {
// 处理 AJAX 请求失败的情况
console.error("AJAX 请求失败：", status, error);
showCustomNotification("表单提交失败，请重试。", 'error');
}
});
});
});通过 e.preventDefault()，我们确保了表单的默认提交行为被抑制，从而允许 AJAX 请求独立完成，并在其回调函数中处理后续逻辑，而不会导致页面刷新。
完善 AJAX 请求：数据传输与后端处理
为了使 AJAX 表单提交真正有效，我们需要确保以下两点：
- 前端正确发送表单数据： 在 $.ajax() 方法中，使用 data 属性将收集到的表单字段作为键值对发送到服务器。
- 后端正确接收和处理数据： PHP 脚本应通过 $_POST 全局变量接收数据，进行处理（如验证、存储到数据库），并返回一个响应（通常是 JSON 格式）。
后端 PHP 处理 (backend/form-process.php)
后端 PHP 脚本负责接收 AJAX 请求发送的数据，执行业务逻辑（如数据验证、数据库操作），并返回一个结构化的响应，通常是 JSON 格式，以便前端可以根据响应内容进行相应的操作。
'error', 'message' => '员工编号和IR编号为必填项。']);
exit(); // 停止脚本执行
}
// 更多验证逻辑...
// -------- 模拟数据库插入操作 --------
// 在实际应用中，这里会包含连接数据库、准备 SQL 语句、执行插入等操作
try {
// 示例：
// $pdo = new PDO("mysql:host=localhost;dbname=your_db", "user", "password");
// $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// $stmt = $pdo->prepare("INSERT INTO reports (ccc_employee, ir_number, case_type, ...) VALUES (?, ?, ?, ...)");
// $stmt->execute([$cccEmployee, $irNumber, $caseType, ...]);
// 如果数据库操作成功，返回成功响应
echo json_encode(['status' => 'success', 'message' => '报告已成功提交并保存。']);
} catch (PDOException $e) {
// 数据库操作失败，返回错误响应
error_log("数据库错误: " . $e->getMessage()); // 记录错误日志
echo json_encode(['status' => 'error', 'message' => '数据保存失败，请稍后再试。']);
}
} else {
// 如果不是 POST 请求，返回错误
echo json_encode(['status' => 'error', 'message' => '无效的请求方法。请使用 POST 请求。']);
}
?>前端通知的实现：从 alert 到自定义弹窗
虽然 alert() 可以用于简单的测试，但在生产环境中，我们通常会使用更美观、更友好的自定义弹窗或通知条。以下是一个简单的自定义弹窗实现示例。
HTML 结构：
在页面中添加一个用于显示通知的 div 元素，并设置初始样式为隐藏。
JavaScript 函数：
创建一个 JavaScript 函数来控制弹窗的显示、内容和样式。
function showCustomNotification(message, type = 'success') {
const popup = $('#notificationPopup');
const msgSpan = $('#notificationMessage');
msgSpan.text(message); // 设置通知内容
// 根据类型设置背景颜色
if (type === 'success') {
popup.css('background-color', '#4CAF50'); // 绿色
} else if (type === 'error') {
popup.css('background-color', '#f44336'); // 红色
} else if (type === 'info') {
popup.css('background-color', '#2196F3'); // 蓝色
}
popup.fadeIn(); // 淡入显示
// 3秒后淡出隐藏
setTimeout(function() {
popup.fadeOut();
}, 3000);
}现在，在 AJAX 的 success 和 error 回调中，就可以调用 showCustomNotification 函数来显示更友好的通知了。
// 在 AJAX success 回调中
success: function(response) {
console.log("服务器响应：", response);
if (response.status === 'success') {
showCustomNotification(response.message, 'success');
$("#reportsForm")[0].reset(); // 提交成功后清空表单
} else {
showCustomNotification(response.message, 'error');
}
},
// 在 AJAX error 回调中
error: function(xhr, status, error) {
console.error("AJAX 请求失败：", status, error);
showCustomNotification("表单提交失败，请检查网络或重试。", 'error 
