本文有axios的get方法、post方法。
axios发送post请求,springMVC接收不到数据问题之解决。关键是:
let params = new URLSearchParams();
params.append('name', this.currentLoginUser.userName);
params.append('pass', this.currentLoginUser.password);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试axios get post方法</title> </head> <body> <div id="divLogin"> <fieldset> <legend>用户登录</legend> <label>用户名:</label> <input type="text" v-model="currentLoginUser.userName"><br> <label>密 码:</label> <input type="password" v-model="currentLoginUser.password"><br> <button @click="userLogin()">登录get方法</button> <button @click="userLoginPost()">登录post方法</button><br> <label>登录信息:{{loginMsg}}</label> </fieldset> </div> </body> <script src="js/vue.js"></script> <script src="js/axios.min.js"></script> <script> var divLoginData = { currentLoginUser:{userName:"",password:""}, getUrl:"http://localhost:8080/Servlet/LoginServlet", loginMsg:"", }; var vm1= new Vue({ el:"#divLogin", data:divLoginData, methods:{ userLogin(){ console.log("user:"+ this.currentLoginUser.userName) ; console.log("pass:"+ this.currentLoginUser.password) ; axios.get(this.getUrl, {params:{name:this.currentLoginUser.userName,pass:this.currentLoginUser.password,guestFlag:"jsp"}} ).then( res=>{ this.loginMsg = res.data; } ).catch( err=>{ this.loginMsg = res.data; } ) }, userLoginPost(){ console.log("user:"+ this.currentLoginUser.userName) ; console.log("pass:"+ this.currentLoginUser.password) ; let params = new URLSearchParams(); params.append('name', this.currentLoginUser.userName); params.append('pass', this.currentLoginUser.password); params.append('guestFlag', 'jsp'); axios.post(this.getUrl, params, {headers:{ 'Content-Type': 'application/x-www-form-urlencoded'}} ).then( res=>{ this.loginMsg = res.data; } ).catch( err=>{ this.loginMsg = res.data; } ) }, } }) </script> </html>