答案：使用 fetch 或 XMLHttpRequest 可模拟表单提交并处理响应。1. fetch 结合 FormData 提交表单数据，通过 .json() 或 .text() 解析响应；2. 手动构造 JSON 数据需设置 'Content-Type': 'application/json'；3. XMLHttpRequest 适用于兼容旧浏览器；4. 处理响应包括解析 JSON、文本、文件下载及错误提示。
JavaScript 模拟 HTML 表单提交并处理响应 是前端开发中常见的需求，比如在不刷新页面的情况下提交数据，并获取服务器返回结果。下面介绍几种常用方式，包括使用 fetch 和 XMLHttpRequest 模拟表单提交，并处理响应。
使用 fetch 模拟表单提交
现代浏览器推荐使用 fetch API，它语法简洁，支持 Promise，便于异步处理。
假设你有一个表单：
<form id="myForm"> <input type="text" name="username" value="张三" /> <input type="email" name="email" value="zhang@example.com" /> </form>
你可以用 JavaScript 获取表单数据并提交：
立即学习“前端免费学习笔记（深入）”；
const form = document.getElementById('myForm');const formData = new FormData(form);
fetch('/submit-form', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('网络错误');
}
return response.json(); // 假设后端返回 JSON
})
.then(data => {
console.log('提交成功:', data);
// 处理响应数据，如提示用户、跳转页面等
})
.catch(error => {
console.error('提交失败:', error);
});
手动构造表单数据（适用于非 FormData 场景）
如果不想使用 FormData，也可以手动构建键值对，例如发送 JSON 数据：
username: '张三',
email: 'zhang@example.com'
};
fetch('/submit-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
})
.then(response => response.json())
.then(data => {
console.log('服务器返回:', data);
});
使用 XMLHttpRequest（兼容老浏览器）
如果你需要支持 IE 等旧浏览器，可以使用 XMLHttpRequest：
const formData = new FormData(document.getElementById('myForm'));
xhr.open('POST', '/submit-form', true);
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log('成功:', data);
} else {
console.error('请求失败');
}
};
xhr.onerror = function() {
console.error('网络异常');
};
xhr.send(formData);
处理响应的常见方式
服务器响应可能是 JSON、文本或重定向指令。以下是几种处理方式：
- 响应为 JSON：使用
.json()方法解析 - 响应为纯文本：使用
.text()方法读取 - 文件下载：可创建 Blob 并触发下载
- 错误处理：检查
response.ok或状态码，给出用户提示
示例：处理文件下载响应
fetch('/download-report').then(res => res.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
});
基本上就这些。根据项目需求选择合适的方法，fetch 更现代简洁，XMLHttpRequest 兼容性更好。关键是正确构造数据、设置请求头，并妥善处理响应与异常。
