Vue之请求如何传递参数

Vue请求传递参数 Vue请求 Vue传递参数 2023-05-14 11:05:49 892人浏览八月长安

摘要

目录一、get请求1、直接拼接2、params属性二、post请求1、data属性传递2、params属性传递三、常见的 Content-Type 类型1、application/x

一、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后面

携带的参数

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后面没有拼接参数

数据格式application/json

请求体数据为json字符串

服务器端接收参数使用 @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后面

携带的参数

后端代码

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