JavaScript表单提交与AJAX教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript表单提交与AJAX数据发送教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

表单提交不跳转页面的核心是用 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。

• 提交前设 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 更新进度条

今天关于《JavaScript表单提交与AJAX教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！