### 使用 `FormData` 提交表单数据 #### 创建和初始化 `FormData` 可以通过获取现有的 `<form>` 元素来创建 `FormData` 对象： ```javascript var form = document.getElementById("myForm"); var formData = new FormData(form); ``` 这会自动填充所有带有 `name` 属性的表单项到 `FormData` 实例中[^1]。 #### 访问表单字段值 可以利用 `.get()` 方法根据名称访问存储于 `FormData` 中的数据项： ```javascript var nameValue = formData.get("name"); // 获取名为 "name" 字段的值 var passwordValue = formData.get("psw"); // 获取名为 "psw" 字段的值 ``` 对于多选框或其他可能返回多个值的情况，则应使用 `.getAll()` 来检索全部匹配条目。 #### 添加自定义键值对 除了从现有表单提取外，还可以向 `FormData` 手动追加额外的信息： ```javascript formData.append("customKey", "valueToAdd"); // 或者附加文件对象 const fileInput = document.querySelector('input[type="file"]'); if (fileInput.files.length > 0) { const fileToUpload = fileInput.files[0]; formData.append("uploadedFile", fileToUpload); } ``` 此操作不会覆盖同名已有项目；相反，它会在内部列表里新增一条记录。 #### 修改或删除已存在的条目 要更新某个特定键对应的值可调用`.set()`, 如果该键已经存在则替换其旧值: ```javascript formData.set("existingKey", newValue); ``` 而移除某一项只需执行 `.delete()` : ```javascript formData.delete("keyToRemove"); ``` 这些方法允许灵活调整待发送的内容集合. #### 发送 `FormData` 到服务器端 为了异步上传表单内容而不刷新整个页面，推荐采用 AJAX 技术。这里给出基于原生 Fetch API 和 jQuery 的两种实现方案： ##### 原生 Fetch 方式 ```javascript fetch('/uploadEndpoint', { method: 'POST', body: formData, }).then(response => response.json()) .then(result => console.log('Success:', result)) .catch(error => console.error('Error:', error)); ``` 注意设置请求体为 `body: formData` 即可，无需指定 `Content-Type` 头部因为浏览器会自动处理 multipart/form-data 类型编码[^4]。 ##### jQuery Ajax 版本 如果项目依赖 jQuery 库的话，那么可以用更简洁的方式来发起 POST 请求： ```javascript $.ajax({ url: '/uploadEndpoint', type: 'POST', data: formData, processData: false, // 不要预处理数据（即不转换成查询字符串） contentType: false, // 不设 Content-Type 头部让浏览器自行决定合适的媒体类型 success: function(data){ alert('Data uploaded successfully'); }, error: function(){ alert('An error occurred while uploading.'); } }); ``` 上述代码片段展示了如何配置选项以适应 `multipart/form-data` 编码格式的要求。