首页 > 网络编程 > JavaScript > javascript技巧 > 请求方式Method和请求类型Content-Type

解读请求方式Method和请求类型Content-Type

2024-09-18 10:19:24 作者：勿语&

HTTP请求中,Content-Type头部用于指定请求体或响应体的类型,常见的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用请求方式包括Get、Post、Put、Delete

1. 请求Content-Type （用来指定请求体或响应体的类型）

application/x-www-form-urlencoded：参数以键值对形式传递，适合普通表单提交。（常用）
multipart/form-data：用于文件上传，也可以包含其他键值对。（常用）
application/json：用于发送JSON格式的数据，广泛应用于API交互。（常用）
text/plain：用于发送纯文本数据。
application/xml 或 text/xml：用于发送XML格式的数据。

2. 常用请求方式

Get：常用于查询，一般拼接在url后面

如：http://example.com/api/resource?key1=value1&key2=value2

// 构造查询字符串,形如：key1=value1&key2=value2
const queryParams = new URLSearchParams();
queryParams.append('key1', 'value1');
queryParams.append('key2', 'value2');
// 构造完整的URL
const url = `http://example.com/api/resource?${queryParams.toString()}`;

// 发送GET请求
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Post：常用于新增，请求参数放在请求体中

Content-Type = ‘application/json’

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Content-Type = ‘application/x-www-form-urlencoded’

const queryParams = new URLSearchParams();
queryParams.append('key1', 'value1');
queryParams.append('key2', 'value2');

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: queryParams.toString() 
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Content-Type = ‘multipart/form-data’

// JavaScript 发送请求
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', 'This is a test file.');

fetch('/upload', {
  method: 'POST',
  body: formData // 不需要设置Content-Type，FormData会自动设置
})
.then(response => response.json())
.then(data => console.log(data));

Put：常用于修改，请求参数放在请求体中

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

fetch('/api/users', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(user)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Delete：常用于删除，请求参数放在请求体中或URL中

// 删除单条记录时
fetch('/api/users/1', {
  method: 'DELETE'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

// 删除多条记录时
const ids=[1,2,3,4]
fetch('/api/users', {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(ids)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。