目录
在现代 Web 开发中，Ajax 技术使得我们可以在不刷新页面的情况下与服务器进行数据交互，极大地提升了用户体验。本文将介绍如何使用 Ajax 提交表单以及实现文件上传功能，并附上详细的代码示例。
一、Ajax 提交表单
1.1 基本原理
Ajax 提交表单的核心思想是通过 JavaScript 的 XMLHttpRequest 对象或 fetch API 发送 HTTP 请求，将表单数据异步地提交到服务器，并处理服务器返回的响应。
1.2 HTML 表单示例
<form id="myForm">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
1.3 JavaScript 示例（使用 fetch API）
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
const formData = new FormData(this);
const data = {
};
formData.forEach((value, key) => {
data[key] = value;
});
// 使用 fetch API 发送 POST 请求
fetch('/api/submit-form',