首先实现前端AJAX提交数据，后端PHP接收处理并返回响应。1. 创建包含表单的index.html页面；2. 使用ajax.js通过fetch发送JSON数据至server.php；3. server.php读取JSON输入，验证姓名和邮箱，返回对应结果；4. 前端根据响应更新页面内容，实现无刷新交互。需注意CORS、数据格式一致性及安全性。
AJAX 配合 PHP 实现前后端交互，是 Web 开发中非常基础且实用的技术。下面通过一个完整的实例，带你从零开始实现前端使用 AJAX 提交数据，后端用 PHP 接收并返回响应的全过程。
1. 项目结构说明
确保项目目录结构清晰，便于管理：2. 前端页面：index.html
创建一个简单的 HTML 页面，包含表单和按钮，用户输入姓名和邮箱后，通过 AJAX 提交给 PHP 处理。
AJAX + PHP 示例 用户信息提交
3. 前端脚本：ajax.js
使用原生 JavaScript 的 fetch API 发送 POST 请求，阻止表单默认提交行为。
document.getElementById('userForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止页面刷新
const formData = new FormData(this); // 收集表单数据
const data = {
name: formData.get('name'),
email: formData.get('email')
};
fetch('server.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
const resultDiv = document.getElementById('result');
if (result.success) {
resultDiv.innerHTML = '' + result.message + '';
} else {
resultDiv.innerHTML = '' + result.message + '';
}
})
.catch(error => {
document.getElementById('result').innerHTML = '请求出错：' + error;
});
});
4. 后端处理：server.php
PHP 脚本接收 JSON 格式的数据，验证并返回 JSON 响应。
立即学习“PHP免费学习笔记（深入）”；
false,
'message' => '请填写正确的姓名和邮箱'
];
} else {
// 模拟保存成功
$response = [
'success' => true,
'message' => "欢迎，{$name}！我们已将确认邮件发送至 {$email}。"
];
}
} else {
$response = [
'success' => false,
'message' => '缺少必要参数'
];
}
// 返回 JSON 响应
echo json_encode($response);
?>
5. 测试流程
启动本地服务器（如 Apache、Nginx 或 PHP 内置服务器）：
php -S localhost:8000
访问 http://localhost:8000/index.html，填写表单并提交，观察页面是否无刷新显示结果。
6. 注意事项
- 跨域问题：若前端 HTML 与 PHP 不在同域名下，需正确配置 CORS 头。
- 安全性：实际项目中应对输入进行更严格的过滤，防止注入攻击。
- 错误处理：可加入日志记录或更详细的错误码。
- JSON 解析：确保前端发送的是 JSON，后端正确读取 php://input。
