欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文詳解axios四種傳參方式及后端接參

 更新時間：2023年10月12日 10:43:41   作者：€?掃地僧?€  
在開發(fā)的過程中,我們會經(jīng)常使用到axios進行數(shù)據(jù)的交互,這篇文章主要給大家介紹了關于axios四種傳參方式及后端接參的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下

詳解axios四種傳參，后端接參

方式一、通過data字段將json數(shù)據(jù)發(fā)送到后臺（用","發(fā)送數(shù)據(jù)）

//格式：axios.delete(服務器鏈接,{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);
}

后端服務器接收的數(shù)據(jù)：{aid=11}

方式二、通過params字段將json數(shù)據(jù)發(fā)送到后臺（用","發(fā)送數(shù)據(jù)）,實際上是在網(wǎng)址上做拼接。

// 格式：axios.delete(服務器鏈接,{params:{鍵:值}}）
axios.delete("/delete" , {params:{aid:row.aid}}).then(resp => {
    let resultInfo = resp.data;
})

前端瀏覽器發(fā)送的數(shù)據(jù)

后端接收：

用@RequestBody指定接收的是json格式的參數(shù)，然后參數(shù)可以通過名字自動匹配。

@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);
}

后端服務器接收的數(shù)據(jù)：107

方式三、直接在地址欄上拼接數(shù)據(jù)，且必須在拼接前加"/"

//格式：axios.delete("/服務器鏈接/"+值）
axios.delete("/delete/"+row.aid).then(resp => {
    let resultInfo = resp.data;
    if (resultInfo.success) {
        this.$message({
            type: 'success',
            message: resultInfo.message
        });
    }
})

客戶端

后端接收（服務器）

// 通過在 /{參數(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;
})

 服務器直接接收，按名字匹配，如果名字不一致，則用@RequestParam進行匹配

@DeleteMapping("/delete")
public ResultInfo delete(Integer aid) {
    System.out.println(aid);
    return new ResultInfo(true);
}

注： get和delete幾乎完全一致

總結

到此這篇關于axios四種傳參方式及后端接參的文章就介紹到這了,更多相關axios傳參及后端接參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論