在前端开发中，选择合适的请求头（`Content-Type`）对于数据的正确传输和解析非常重要。以下是三种常见的`Content-Type`及其适用场景： ### 1. `application/x-www-form-urlencoded` 这种方式将表单数据序列化为键值对的形式，并进行URL编码。通常用于简单的表单提交。 #### JavaScript示例代码： ```javascript fetch('https://example.com/api', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ key1: 'value1', key2: 'value2' }) }).then(response => response.json()) .then(data => console.log(data)); ``` 上述代码中，`new URLSearchParams()`方法将对象转换为`application/x-www-form-urlencoded`格式的数据。 ### 2. `multipart/form-data` 主要用于文件上传或需要传输大块二进制数据的场景。它不会对数据进行URL编码。 #### JavaScript示例代码： ```javascript const formData = new FormData(); formData.append('file', fileInput.files[0]); formData.append('key1', 'value1'); fetch('https://example.com/upload', { method: 'POST', body: formData }).then(response => response.json()) .then(data => console.log(data)); ``` 上述代码中，`FormData`对象自动处理了数据的边界和编码，适合文件上传等复杂数据传输。 ### 3. `application/json` 这种方式将数据以JSON格式发送，适用于API调用等场景。现代Web API大多使用这种方式。 #### JavaScript示例代码： ```javascript fetch('https://example.com/api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key1: 'value1', key2: 'value2' }) }).then(response => response.json()) .then(data => console.log(data)); ``` 上述代码中，`JSON.stringify()`方法将JavaScript对象转换为JSON字符串。 ### 解释 - **`application/x-www-form-urlencoded`**：适用于简单的键值对数据传输，如普通的表单提交。 - **`multipart/form-data`**：适用于包含文件或其他二进制数据的复杂数据传输。 - **`application/json`**：适用于结构化数据的传输，尤其是与现代Web API交互时。