axios四种传参，后端接参

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

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

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

前端浏览器发送的数据

后端接参

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

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

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

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

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

前端浏览器发送的数据

后端接收：

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

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

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

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

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

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

1.  
   //格式：axios.delete("/服务器链接/" 值）
2.  
    
3.  
   axios.delete("/delete/" row.aid).then(resp => {
4.  
   let resultInfo = resp.data;
5.  
   if (resultInfo.success) {
6.  
   this.$message({
7.  
   type: 'success',
8.  
   message: resultInfo.message
9.  
   });
10.  
    }
11.  
    })

客户端

后端接收（服务器）

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

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

1.  
   axios.delete("/delete?aid=" row.aid).then(resp => {
2.  
   let resultInfo = resp.data;
3.  
   })

 服务器直接接收，按名字匹配，如果名字不一致，则用@RequestParam进行匹配

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

注： get和delete几乎完全一致

本篇文章来至：学新通