axios 是一个用于浏览器与服务端发送请求的框架，它本身具有以下特征携带数据发送请求与接收服务器的请求功能.
基本使用方式（举例）：
axios.post(‘路径‘, 参数).then(function (response) { alert(response.data) })
路径: servlet访问路径
参数: 浏览器携带数据
response.data : 浏览器返回数据
下面介绍与vue框架一起使用来完成一个登陆响应的Demo。
首先要引入vue.min.js和axios.min.js
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
先写好登陆的基本框架，此时暂不加入axios和后端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test login</title>
</head>
<body>
<!--引入包-->
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<!--定义操作区，为一个表单-->
<div id="app">
<form action="handleLogin" method="post">
please enter name:<input type="text" v-model="user.username"><br/>
please enter pass:<input type="text" v-model="user.userpassword"><br/>
<input type="button" value="login" v-on:click="login()">
<input type="reset" value="reset"><br/><hr>
<!--视图区定义-->
{{message}}
</form>
</div>
<script>
<!--定义vue对象-->
new Vue({
<!--定义vue接管操作区-->
el: "#app",
<!--定义数据模型-->
data : {
user:{username:"",userpassword:""},
message: "",
},
<!--定义方法-->
methods:{
login:function()
{
this.message=this.user.username+" "+this.user.userpassword;
}
}
})
</script>
</body>
</html>
此时访问该项目结果如图所示：
现在，加入axios，将表单数据发送至后端，并响应！
在methods里面加入如下代码
_that=this;
axios.post("./handleLogin",this.user).then(function(response){
alert(response.data);
});
解释：
_that=this;
因为在axios里面无法使用this对象，所以我们定义一个that来保存this，在axios里面使用that来完成相关vue相关操作
axios.post("./handleLogin",this.user)
post中的两个参数，第一个是请求路径，第二个是向服务端发送的数据，post也可以改为get，指示请求方式不同而已。
then(function(response){
alert(response.data);
});
固定写法，接在post或者get后，利用response.data来接受服务器返回的数据，此处为了效果，将数据alert一下！
前端整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test login</title>
</head>
<body>
<!--引入包-->
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<!--定义操作区，为一个表单-->
<div id="app">
<form action="handleLogin" method="post">
please enter name:<input type="text" v-model="user.username"><br/>
please enter pass:<input type="text" v-model="user.userpassword"><br/>
<input type="button" value="login" v-on:click="login()">
<input type="reset" value="reset"><br/><hr>
<!--视图区定义-->
{{message}}
</form>
</div>
<script>
<!--定义vue对象-->
new Vue({
<!--定义vue接管操作区-->
el: "#app",
<!--定义数据模型-->
data : {
user:{username:"",userpassword:""},
message: "",
},
<!--定义方法-->
methods:{
login:function()
{
_that=this;
this.message=this.user.username+" "+this.user.userpassword;
axios.post("./handleLogin",this.user).then(function(response){
alert(response.data);
});
}
}
})
</script>
</body>
</html>
后端代码，用一个简单的servlet来完成相应，handleLogin.java
package com.boxuegu.charles;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/handleLogin")
public class handleLogin extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
String data=request.getReader().readLine();
System.out.print("前端正在访问："+data);
response.getWriter().write("接收到前端数据："+data);
}
}
解释：
利用response.getWriter().write("接收到前端数据："+data);来返回数据给前端，
System.out.print("前端正在访问："+data);向控制台打印信息。
完成基本代码编写，现在访问该demo项目，进行测试。先看浏览器端。
可以看到，浏览器已经接收到了后端传回的数据，此时后端控制台如下：
可以发现，后端已经有了响应，并接收到前端的数据，而且是在doPost方法中响应，如果将前端axios改成get，那么就会在doGet方法中响应。