params和body传参讲解
1.params传参
1.1params传参俗称路径传参;
1.2params传参适用于get和delete请求方式(不是只能而是是适用);
1.3在不同网络请求库中fetch、$.ajax、axios等params传参方式写法或许有所不同,但是能很明显在路径上看出传递的参数(这也就可以统一写法:直接将参数拼接在路径上就是我们所说的params传参)
在jQuery中使用$.ajax请求
// params传参方式1
$.ajax({type:'get',async:true,url:"http://127.0.0.1:8848/JQuery练习/js/data.json",data:{ key: 'value',name:"Aniya" }, // get方式的params传参dataType:"json",success:function(data){console.log("请求成功了",data);},error:function(err){console.log("请求失败",err);}
})// params传参方式2
$.ajax({type:'get',async:true,url:"http://127.0.0.1:8848/JQuery练习/js/data.json?key=value&name=Aniya",dataType:"json",success:function(data){console.log("请求成功了",data);},error:function(err){console.log("请求失败",err);}
})
在js中使用fetch请求
fetch('http://10.10.22.12:8081/message/private/page?order=&asc=false&page=1&limit=10').then(response => {// 检查响应状态if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}// 解析响应为 JSONreturn response.json();}).then(data => {// 处理响应数据console.log("获取执行动作列表:", data);this.actionList = data.data;}).catch(error => {// 处理错误console.error("Error:", error);});
使用axios请求
// params传参方式1
const url = 'https://api.example.com/data';
const params = {key1: 'value1',key2: 'value2'
};// 发起 GET 请求
axios.get(url, { params }).then(response => {// 请求成功,处理响应数据console.log('Response Data:', response.data);}).catch(error => {// 请求失败,处理错误console.error('Error:', error);});// params传参方式2
const url = 'https://api.example.com/data?key1=value1&key2=value2';
axios.get(url).then(response => {// 请求成功,处理响应数据console.log('Response Data:', response.data);}).catch(error => {// 请求失败,处理错误console.error('Error:', error);});
总结:无论是etch、$.ajax、axios等params传参最终都是将参数拼接到路径上,所以它们的统一的写法就是直接在定义路径时就将参数拼接在请求路径上
2.body传参
2.1body传参俗称请求体传参
2.2body传参适用于post和put请求方式(不是只能而是是适用)
2.3body如何传参
示例:
// 使用fetch
fetch("http://127.0.0.1:8848//admin-api/rob/ot-info/manualNavigation", {method: "POST", // 指定请求方法为 POSTheaders: {"Content-Type": "application/json" // 设置请求头,指定发送的数据格式为 JSON},body: JSON.stringify(data) // 将 JavaScript 对象转换为 JSON 字符串作为请求体}).then(response => {if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}return response.json(); // 解析响应为 JSON}).then(data => {console.log("Success:", data); // 处理响应数据}).catch(error => {console.error("Error:", error); // 处理错误});// 使用$.ajax
$.ajax({url: '/api/resource',type: 'POST',data: JSON.stringify({ key: 'value' }),contentType: 'application/json',success: function(response) {console.log(response);},error: function(xhr, status, error) {console.error(error);}
});
Content-Type就是用来设置请求参数的数据格式
3.总结说明
1.get和delete按照规范来说是要使用params传参,而post和put是使用body传参方式,但是总有不按照规范来的,硬是get也要使用body传参方式或者post也使用路径传参,也不是不可以。