Ajax 提交表单与文件上传

在现代 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',