使用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方式即可。不复杂但容易忽略细节，比如请求头和数据格式匹配问题。
以上就是HTML表单AJAX提交怎么写_HTML中使用AJAX提交表单的代码与方法的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597302.html
微信扫一扫 
支付宝扫一扫 
