详解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几乎完全一致