Vue请求怎么传递参数

2023-07-05 22:13

短信预约 -IT技能 免费直播动态提醒

本篇内容介绍了“Vue请求怎么传递参数”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、get请求

get请求没有请求体，传递的参数是添加到url字符串的后面：url?name=value&name1=value1。

1、直接拼接

axios({method: "get",url: "http://localhost:1111/01/zc?yhm=lhj&pwd=123",   //参数拼接在url后面}).then(function(resp){console.log(resp.data)})

参数附在url后面

Vue请求怎么传递参数

携带的参数

Vue请求怎么传递参数

2、params属性

params属性是将参数添加到url的请求字符串中。

this.axios({method:'get',    params:{          yhm:"lhj",          pwd:"123"          },    url:'http://localhost:1111/01/zc'   }).then(function(resp){          console.log(resp.data);          that.mes=resp.data;         })

后端接收代码

@CrossOrigin(origins = "*",maxAge = 3600)    @RequestMapping(value = "/zc")    public String ajax(String yhm,String pwd){        System.out.println(yhm);        System.out.println(pwd);        return "传参成功";        }

二、post请求

post请求有请求体，传递的参数既可以放在请求体中也可以放在url后面。

1、data属性传递

data是添加到请求体（body）中，该方式传递的参数有两种格式：

（1）application/json格式

前端：该格式data用json字符串进行传递参数，数据格式是application/json。

 this.axios({       method:'post',       data:{           name:"lhj",           age:24           },       url:'http://localhost:1111/01/ajax'      }).then(function(resp){          console.log(resp.data);       })

url后面没有拼接参数

Vue请求怎么传递参数

数据格式application/json

Vue请求怎么传递参数

请求体数据为json字符串

Vue请求怎么传递参数

服务器端接收参数使用 @RequestBody 类名对象名 或者@RequestBody Map<>map将前端传来的json数据封装到一个对象或Map中。

 @CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)    @RequestMapping(value = "/ajax",method = RequestMethod.POST)    public String zhuce(@RequestBody Map<String,Object> user){        System.out.println(user.get("name"));        System.out.println(user.get("age"));        return "传参成功";    }

（2）application/x-www-form-urlencoded格式

前端：该格式data用查询字符串进行传递参数，即"name1 = value1&name2 = value2"的形式。

该形式data有两种传递方式：

①直接传递字符串

data:"name=lhj&age=123",      //字符串形式

②使用qs.stringify()将json转换成查询字符串

data:qs.stringify({name:'lhj',age:24}),

后端接收

@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)    @RequestMapping(value = "/ajax",method = RequestMethod.POST)    public String zhuce(String name,int age){        System.out.println(name);        System.out.println(age);        return "传参成功";    }

2、params属性传递

post请求用该属性传递参数跟get请求一样，将参数拼接在url之后。

 this.axios({       method:'post',       params:{           name:"lhj"           },       url:'http://localhost:1111/01/ajax'      }).then(function(resp){          console.log(resp.data);       })

参数附在url后面

Vue请求怎么传递参数

携带的参数

Vue请求怎么传递参数

后端代码

@CrossOrigin(origins = "http://localhost:8080",maxAge = 3600)    @RequestMapping(value = "/ajax",method = RequestMethod.POST)    public String zhuce(String name){        System.out.println(name);        return "传参成功";    }