首先实现前端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 处理。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>AJAX + PHP 示例</title>
</head>
<body>
<h2>用户信息提交</h2>
<form id="userForm">
<label>姓名：<input type="text" name="name" required /></label><br><br>
<label>邮箱：<input type="email" name="email" required /></label><br><br>
<button type="submit">提交</button>
</form>
<div id="result"></div>
<script src="ajax.js"></script>
</body>
</html>
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 = '<span style="color:green;">' + result.message + '</span>';
} else {
resultDiv.innerHTML = '<span style="color:red;">' + result.message + '</span>';
}
})
.catch(error => {
document.getElementById('result').innerHTML = '请求出错：' + error;
});
});
4. 后端处理：server.php
PHP 脚本接收 JSON 格式的数据，验证并返回 JSON 响应。
立即学习“PHP免费学习笔记（深入）”；
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // 若前端与 PHP 不同域需开启 CORS
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');
// 获取前端发送的 JSON 数据
$input = file_get_contents('php://input');
$data = json_decode($input, true);
// 初始化返回数据
$response = [];
// 验证数据
if (isset($data['name']) && isset($data['email'])) {
$name = trim($data['name']);
$email = filter_var(trim($data['email']), FILTER_VALIDATE_EMAIL);
if ($name === '' || !$email) {
$response = [
'success' => 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。
