表单提交不跳转页面的核心是用 AJAX 拦截 submit 事件，调用 preventDefault() 阻止刷新，用 FormData 收集数据（支持文件、多选、复选框），再通过 fetch（推荐）或 XMLHttpRequest 发送，自动设置 Content-Type，响应需检查 response.ok 并解析 JSON，提交时禁用按钮、反馈状态，出错显示具体信息。
表单提交不用跳转页面，核心是用 AJAX 拦截默认提交行为，把数据发给后端。关键在阻止 submit 事件、收集表单值、用 fetch 或 XMLHttpRequest 发送，再处理响应。
阻止默认提交并获取表单数据
给表单绑定 submit 事件，调用 event.preventDefault() 阻止页面刷新。再用 new FormData(form) 快速提取所有字段值，它自动适配 input、select、textarea 和文件上传。
- 确保表单有
id或能被 JS 选中，例如document.querySelector('#myForm') -
FormData对于 checkbox 和 multiple select 也按规范处理：未勾选的不包含，多选的逐个添加 - 如需额外参数（如 token），可用
formData.append('token', 'abc123')追加
用 fetch 发送 AJAX 请求
fetch 是现代推荐方式，语法简洁、基于 Promise。提交时方法设为 POST，body 直接传 FormData 实例（浏览器自动设置正确的 Content-Type）。
- 不需要手动设置
Content-Type——FormData会触发multipart/form-data或application/x-www-form-urlencoded（取决于是否含文件） - 响应用
response.json()解析 JSON 数据，记得用try/catch处理解析失败 - 网络错误（如断网）不会进
catch，需检查response.ok判断 HTTP 状态码是否在 200–299 范围
处理成功与失败反馈
提交后应明确告诉用户结果。常见做法：禁用提交按钮防重复点击、显示加载状态、根据响应更新 UI。
立即学习“Java免费学习笔记（深入）”；
- 提交前设
button.disabled = true，完成后恢复；也可加loading...文字或 spinner - 后端返回成功标识（如
{ success: true, message: '提交成功' }），就提示用户并可重置表单form.reset() - 出错时显示具体信息（如
error.message或后端返回的response.errors），别只写“请求失败”
兼容旧浏览器或需要精细控制时用 XMLHttpRequest
如果必须支持 IE10/11，或要监听上传进度，可用 XMLHttpRequest。流程类似：创建实例、配置、监听 load、调用 xhr.send(formData)。
- 手动设置
xhr.open('POST', '/api/submit')，无需设Content-Type（FormData会自动处理） - 监听
xhr.onload，通过xhr.status和xhr.responseText判断结果 - 上传大文件时可监听
xhr.upload.onprogress更新进度条
