一文詳解axios四種傳參方式及后端接參
更新時(shí)間：2023年10月12日 10:43:41 作者：€?掃地僧?€
在開發(fā)的過程中,我們會(huì)經(jīng)常使用到axios進(jìn)行數(shù)據(jù)的交互,這篇文章主要給大家介紹了關(guān)于axios四種傳參方式及后端接參的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
詳解axios四種傳參，后端接參
方式一、通過data字段將json數(shù)據(jù)發(fā)送到后臺(tái)（用","發(fā)送數(shù)據(jù)）
//格式：axios.delete(服務(wù)器鏈接,{data:{鍵:值}}）
axios.delete("/delete" , {data:{aid:row.aid}}).then(resp => {
let resultInfo = resp.data;
})前端瀏覽器發(fā)送的數(shù)據(jù)
后端接參
用@RequestBody指定接收的是json格式的參數(shù)，然后參數(shù)類型是Map類型，通過map的鍵取出數(shù)據(jù)。
/* 格式:
@DeleteMapping("/delete")
@RequestBody Map<String,前端發(fā)送的值的數(shù)據(jù)類型> 形參名
*/
@DeleteMapping("/delete")
public ResultInfo delete(@RequestBody Map<String,Object> params) {
System.out.println(params.get("aid"));
return new ResultInfo(true);
}后端服務(wù)器接收的數(shù)據(jù)：{aid=11}
方式二、通過params字段將json數(shù)據(jù)發(fā)送到后臺(tái)（用","發(fā)送數(shù)據(jù)）,實(shí)際上是在網(wǎng)址上做拼接。
// 格式：axios.delete(服務(wù)器鏈接,{params:{鍵:值}}）
axios.delete("/delete" , {params:{aid:row.aid}}).then(resp => {
let resultInfo = resp.data;
})前端瀏覽器發(fā)送的數(shù)據(jù)
后端接收：
用@RequestBody指定接收的是json格式的參數(shù)，然后參數(shù)可以通過名字自動(dòng)匹配。
@DeleteMapping("/delete")
public ResultInfo delete(Integer aid) {
System.out.println(aid);
return new ResultInfo(true);
}參數(shù)名不一致則用@RequestParam("前端傳過來的參數(shù)名") 做匹配
@DeleteMapping("/delete")
public ResultInfo delete(@RequestParam("aid") Integer aaid) {
System.out.println(aaid);
return new ResultInfo(true);
}后端服務(wù)器接收的數(shù)據(jù)：107
方式三、直接在地址欄上拼接數(shù)據(jù)，且必須在拼接前加"/"
//格式：axios.delete("/服務(wù)器鏈接/"+值）
axios.delete("/delete/"+row.aid).then(resp => {
let resultInfo = resp.data;
if (resultInfo.success) {
this.$message({
type: 'success',
message: resultInfo.message
});
}
})客戶端
后端接收（服務(wù)器）
// 通過在 /{參數(shù)名} 得到訪問方法，然后取值用@PathVariable("參數(shù)名")
@DeleteMapping("/delete/{aid}")
public ResultInfo delete(@PathVariable("aid") Integer aid) {
System.out.println(aid);
return new ResultInfo(true);
}
方式四、傳統(tǒng)方式?參數(shù)名=參數(shù)值
axios.delete("/delete?aid="+row.aid).then(resp => {
let resultInfo = resp.data;
})
服務(wù)器直接接收，按名字匹配，如果名字不一致，則用@RequestParam進(jìn)行匹配
@DeleteMapping("/delete")
public ResultInfo delete(Integer aid) {
System.out.println(aid);
return new ResultInfo(true);
}
注： get和delete幾乎完全一致
總結(jié)
到此這篇關(guān)于axios四種傳參方式及后端接參的文章就介紹到這了,更多相關(guān)axios傳參及后端接參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
獲取HTMl文件制定的元素的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
很多前端只會(huì)謝謝頁面,一讓他們接觸js,就非常害怕,下面這篇文章主要給大家介紹了關(guān)于JS技巧之一行賦值語句能玩出多少花樣的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue雙向綁定的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
基于JavaScript實(shí)現(xiàn)表格隔行換色
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)表格隔行換色,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
在JavaScript的世界中,包管理器是一個(gè)重要的工具,它幫助我們管理、安裝和升級項(xiàng)目的依賴,這篇文章主要介紹了前端包管理器對比(npm?、pnpm和Yarn)的相關(guān)資料,需要的朋友可以參考下2025-09-09
這篇文章主要介紹了JavaScript框架特性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
深入了解Hybrid App技術(shù)的相關(guān)知識(shí)
這篇文章主要介紹了深入了解Hybrid App技術(shù)的相關(guān)知識(shí)，Hybrid App（混合模式移動(dòng)應(yīng)用）是指介于web-app、native-app這兩者之間的app，兼具" Native App良好用戶交互體驗(yàn)的優(yōu)勢 "和" Web App跨平臺(tái)開發(fā)的優(yōu)勢 ",需要的朋友可以參考下2019-07-07
JScript中的''var''定義變量的作用域...2007-03-03
js拖拽是常見的網(wǎng)頁效果,本文將從零開始實(shí)現(xiàn)一個(gè)簡單的js插件,下面和小編來一起學(xué)習(xí)一下吧2019-05-05
這篇文章主要介紹了JS求平均值的小例子，有需要的朋友可以參考一下2013-11-11