首先阻止表单默认提交行为，通过监听submit事件并调用preventDefault()；接着使用FormData收集表单数据，包括文件字段；然后利用fetch或XMLHttpRequest发送异步请求，其中XMLHttpRequest可监听上传进度；最后根据服务器响应更新界面提示。示例代码展示了从拦截提交到数据上传及进度反馈的完整流程，实现无刷新异步上传。
在网页开发中，表单提交是常见需求。为了提升用户体验，我们通常希望用 Ajax 异步上传数据，而不是让页面刷新跳转。这就需要拦截默认的表单提交行为，并通过 JavaScript 发送异步请求。
阻止表单默认提交
表单的默认行为是提交后跳转页面。要实现异步上传，第一步就是阻止这个默认动作。
可以通过监听表单的 submit 事件并调用 event.preventDefault() 来拦截提交：
获取表单元素，绑定 submit 事件在事件处理函数中阻止默认行为然后执行 Ajax 请求
示例代码：
const form = document.getElementById('myForm');form.addEventListener('submit', function(e) { e.preventDefault(); // 阻止页面跳转// 执行异步上传逻辑submitViaAjax();});
使用 FormData 上传数据
大多数表单包含文本、文件等字段，推荐使用 FormData 对象来收集表单数据，它能自动处理文件上传和普通字段。
通过将表单元素传入 FormData 构造函数，可以一键提取所有输入项：
function submitViaAjax() { const formData = new FormData(form);fetch('/upload', {method: 'POST',body: formData}).then(response => response.json()).then(data => {console.log('上传成功:', data);}).catch(error => {console.error('上传失败:', error);});}
兼容文件上传与进度反馈
Ajax 的优势之一是可以监听上传进度，特别适合带大文件的表单。
使用 XMLHttpRequest 可以更精细地控制上传过程：
创建 XMLHttpRequest 实例监听 upload.onprogress 获取进度发送 FormData
示例：
const xhr = new XMLHttpRequest();xhr.upload.onprogress = function(e) {if (e.lengthComputable) {const percent = (e.loaded / e.total) * 100;console.log(
上传进度: ${percent.toFixed(2)}%);}};xhr.open('POST', '/upload');xhr.send(formData);
处理响应与用户提示
异步提交完成后，应根据服务器返回结果给出反馈，比如显示成功消息或错误提示。
可以在 fetch 或 xhr 的回调中操作 DOM 更新界面：
.then(data => { if (data.success) { alert('提交成功！'); } else { alert('提交失败：' + data.message); }})
基本上就这些。拦截表单提交 + FormData 收集数据 + Ajax 发送请求，就能实现流畅的异步上传体验，不刷新页面，还能支持文件和进度显示。
以上就是JS表单提交拦截_Ajax异步上传的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538906.html
微信扫一扫 
支付宝扫一扫 
