在前后端分離的項目中,前端與后端交互采用了前后端分離的方式。此時,使用axios庫可以方便地進行ajax數據請求,并且可以直接向后端發送JSON數據參數。
使用axios進行post請求時,需要傳遞一個數據對象作為請求體,而請求體可以是json格式,也可以是formdata格式,取決于服務端的處理方式。這里重點介紹如何使用axios發送JSON格式的數據。
axios.post(url, {
data: {
name: '張三',
age: 18,
gender: '男'
}
}).then(response =>{
console.log(response.data);
}).catch(error =>{
console.log(error.response);
});
上面的代碼中,使用了axios的post方法向url發送了一個包含name、age、gender三個屬性的JSON數據對象。請求成功后,調用了then方法處理返回的數據,并將數據打印在控制臺上。如果請求失敗,則會調用catch方法并打印控制臺上返回的錯誤信息。
需要注意的是,如果服務端沒有指定Content-Type為application/json,那么需要手動在請求頭中添加該字段。具體如下:
axios.post(url, {
data: {
name: '張三',
age: 18,
gender: '男'
}
}, {
headers: {
'Content-Type': 'application/json'
}
}).then(response =>{
console.log(response.data);
}).catch(error =>{
console.log(error.response);
});
這里使用了axios的post方法時,第三個參數對象中headers添加了Content-Type為application/json的字段。這樣做可以確保服務端正確地解析JSON數據。