### 使用FormData进行数据提交 #### 创建FormData对象 可以通过两种主要的方式创建`FormData`对象。一种是从现有的HTML `<form>`元素中获取，另一种则是直接实例化一个新的`FormData`对象并手动添加键值对[^2]。 对于已有表单的情况： ```javascript // 假设有一个ID为'myForm'的<form>标签存在于DOM中 var form = document.getElementById("myForm"); var formData = new FormData(form); ``` 如果不需要依赖于具体的HTML表单，则可以直接构建`FormData`对象并向其中追加字段： ```javascript var formData = new FormData(); formData.append('username', 'exampleUser'); formData.append('password', 'securePassword'); ``` #### 设置AJAX请求配置项 当通过Ajax发送带有`FormData`的数据时，需要注意调整jQuery或其他库的相关选项以确保正确传输这些数据。特别是要禁用默认的内容类型设置以及防止自动序列化处理过程[^4]。 以下是使用原生XMLHttpRequest的例子： ```javascript var xhr = new XMLHttpRequest(); xhr.open("POST", "/submit-endpoint"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(formData); // 对应的jQuery版本如下所示 $.ajax({ url: '/submit-endpoint', type: 'POST', data: formData, cache: false, processData: false, contentType: false, }); ``` 这里的关键在于将`processData`和`contentType`都设定为`false`，这告诉浏览器不要尝试去解析或修改所传递的数据结构，而是将其作为一个完整的二进制流来对待[^3]。 #### 添加文件到FormData 除了普通的字符串类型的键值对外，还可以利用`append()`方法向`FormData`里加入File对象或者Blob对象表示的文件内容。这对于实现多部分/分片上传特别有用[^1]。 例如，在用户选择了图片之后执行此操作： ```html <input id="fileInput" type="file"> <script> document.querySelector('#fileInput').addEventListener('change', function(event){ let file = event.target.files[0]; formData.append('profilePic', file); }, false); </script> ``` 这样就可以轻松地把用户的头像或者其他任何类型的附件一并发给服务器端了。