使用AJAX提交表单可避免页面刷新，提升用户体验。1. 创建包含姓名、邮箱字段的HTML表单，并添加提交按钮；2. 通过JavaScript监听提交事件，阻止默认行为，用FormData收集数据并转为JSON，通过fetch发送POST请求至服务器；3. 服务端（如PHP）需读取php://input解析JSON数据或直接获取$_POST值，处理后返回JSON响应；4. 前端根据响应结果更新页面内容。关键点：阻止默认提交、正确设置请求头与数据格式匹配、后端兼容数据接收方式。
使用AJAX提交HTML表单可以避免页面刷新，提升用户体验。实现方式是通过JavaScript监听表单提交事件，阻止默认行为，然后使用AJAX将数据发送到服务器。
1. 基本HTML表单结构
先写一个简单的表单，包含几个常用字段：
2. 使用原生JavaScript（fetch）提交表单
推荐使用现代浏览器支持的fetch API来发送AJAX请求。
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交
const formData = new FormData(this); // 收集表单数据
const object = {};
formData.forEach((value, key) => { object[key] = value });
fetch('/submit-form.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(object)
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerHTML = '提交成功：' + data.message;
})
.catch(error => {
document.getElementById('result').innerHTML = '提交失败：' + error;
});
});
说明：
立即学习“前端免费学习笔记（深入）”；
-
e.preventDefault()阻止页面跳转 -
FormData自动收集表单输入 -
JSON.stringify将数据转为JSON格式发送 - 服务端需接收JSON并返回JSON响应
3. 使用jQuery简化AJAX提交（可选）
如果你项目中使用了jQuery，代码会更简洁：
$('#myForm').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '/submit-form.php',
type: 'POST',
data: $(this).serialize(), // 自动序列化表单
success: function(response) {
$('#result').html('提交成功：' + response.message);
},
error: function() {
$('#result').html('提交失败');
}
});
});
注意：$(this).serialize() 发送的是x-www-form-urlencoded格式，适合PHP等后端直接读取$_POST。
4. 后端接收示例（PHP）
如果前端发送JSON，后端需解析原始输入：
$data = json_decode(file_get_contents('php://input'), true);
$name = $data['name'];
$email = $data['email'];
// 处理数据...
echo json_encode(['message' => '数据已收到']);
如果是serialize方式提交，可用：
$name = $_POST['name']; $email = $_POST['email']; echo json_encode(['message' => '提交成功']);
基本上就这些。关键是阻止默认提交、收集数据、用AJAX发送，并处理响应。根据你的技术栈选择原生JS或jQuery方式即可。不复杂但容易忽略细节，比如请求头和数据格式匹配问题。
