Vue中利用axios向服务器端(Java实现)发起携带参数的post请求,vue代码如下:

this.$axios.post('http://localhost:8081/myblog/user/login',
	{
	    id:this.loginForm.username,
	    password:this.loginForm.password,
	},
	{
	    headers: {
		'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'
	    }
	    }).then(res=>{ 
		console.log(res.data)  
		},err =>{
		console.log(err)
		})
	}

然后发起请求,结果看返回状态码为400,并提示“Required String parameter 'id' is not present”。查阅资料,原来需要把请求数据先处理一下:

1.在webpack中运行下边脚本,安装qs:

cnpm install  qs -S

2.在该组件下script标签中引入qs:

import qs from 'qs'

3.在发起请求前,先把请求参数处理一下:

let userMsg  = qs.stringify({
		id:this.loginForm.username,
		password:this.loginForm.password,
		})

4.然后再用axios发起post请求,代码如下:

submitClick(){
		let userMsg  = qs.stringify({
			id:this.loginForm.username,
			password:this.loginForm.password,
		})
		this.$axios.post('http://localhost:8081/myblog/user/login', userMsg)
				.then(res=> {
					console.log(res)
				})
				.catch(function(err) {
					console.log(err)
				})
			}

5.点击相应组件发起post请求,打开F12看到浏览器返回信息:

Object { data: "", status: 200, statusText: "", headers: {}, config: {…}, request: XMLHttpRequest }

证明请求发送成功,请求参数为:

那么服务器端是怎么接收的呢?这里有三种方法:

方法1:直接用参数接收:

 @PostMapping("/login")
    @ResponseBody
    public void userLogin(@RequestParam(value="id") String userName,@RequestParam(value="password") String passWord){
        System.out.println(userName+passWord);
    }

 注意这里的value值要与前端请求的参数一样,@RequestParam 一定不能忘了。

方法2:用实体接收:

  @PostMapping("/login")
    @ResponseBody
    public void userLogin(User user){
        System.out.println(user);
    }

这种方法需要注意实体中的属性名要与前端传过来的值的键名一样,这样实体才能封装成功,不然一样接收不到参数!

方法3:用map接收:

 @PostMapping("/login")
    @ResponseBody
    public void userLogin(@RequestParam HashMap<String,String> userMap){
        System.out.println(userMap.toString());
    }

注意这里同样不能忘了@RequestParam,不然也一样接收不到数据。

好了,问题解决!

Logo

前往低代码交流专区

更多推荐