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方法中響應。