目录
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));