脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → axios传参及后端接参

一文详解axios四种传参方式及后端接参

 更新时间：2023年10月12日 10:43:41   作者：€☞扫地僧☜€  
在开发的过程中,我们会经常使用到axios进行数据的交互,这篇文章主要给大家介绍了关于axios四种传参方式及后端接参的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下

详解axios四种传参，后端接参

方式一、通过data字段将json数据发送到后台（用","发送数据）

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

前端浏览器发送的数据

后端接参

用@RequestBody指定接收的是json格式的参数，然后参数类型是Map类型，通过map的键取出数据。

/* 格式:
		@DeleteMapping("/delete")
		@RequestBody Map<String,前端发送的值的数据类型> 形参名
*/
@DeleteMapping("/delete")
public ResultInfo delete(@RequestBody Map<String,Object> params) {
    System.out.println(params.get("aid"));
    return new ResultInfo(true);
}

后端服务器接收的数据：{aid=11}

方式二、通过params字段将json数据发送到后台（用","发送数据）,实际上是在网址上做拼接。

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

前端浏览器发送的数据

后端接收：

用@RequestBody指定接收的是json格式的参数，然后参数可以通过名字自动匹配。

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

 参数名不一致则用@RequestParam("前端传过来的参数名") 做匹配

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

后端服务器接收的数据：107

方式三、直接在地址栏上拼接数据，且必须在拼接前加"/"

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

客户端

后端接收（服务器）

// 通过在 /{参数名} 得到访问方法，然后取值用@PathVariable("参数名")
@DeleteMapping("/delete/{aid}")
public ResultInfo delete(@PathVariable("aid") Integer aid) {
    System.out.println(aid);
    return new ResultInfo(true);
}

方式四、传统方式?参数名=参数值

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传参及后端接参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论