导入axios.js的脚本：
<script src="js/axios.js"></script>
对于get方式：直接在url后面添加参数和值
<script>
axios({
method:"get",
url:"http://localhost:8088/axiosServlet?username=zhangsan"
}).then(function (resp) {
console.log(resp.data)
})
</script>
对于post请求方式：需要在data里面传递参数和值
<script>
axios({
method:"post",
url:"http://localhost:8088/axiosServlet",
data:"username=zhangsan"
}).then(function (resp) {
console.log(resp.data)
})
</script>
请求方式别名
axios.get(url[,config])
axios.post(url,data[,config]) data表示请求参数
因此上面可以简化成：
axios.get("http://localhost:8088/axiosServlet?username=zhangsan").then(function (resp) {
console.log(resp.data)
})
axios.post("http://localhost:8088/axiosServlet","username=zhangsan").then(function (resp) {
console.log(resp.data)
})
案例：注册验证用户名
前端页面：这里要注意response写的字符串的类型，我这servlet写的true，它默认给我识别成了Boolean类型，因此直接判断他是不是true就行，然而在前面我们两边都是用字符串判断的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr><td>用户名</td><td><input id="user" type="text" name="username"/><span id="dulp" style="color: red;display: none">用户名已存在</span></td></tr>
<tr><td>密码</td><td><input type="password" name="password"><br/></td></tr>
</table>
<script src="js/axios.js"></script>
<script>
document.getElementById("user").onblur=function(){
var value=this.value;
axios.get("http://localhost:8088/judgeServlet?username="+value).then(function (resp) {
console.log(typeof(resp.data))
//注意这里的判断跟Ajax的有点不一样
if(resp.data){
document.getElementById("dulp").style.display=''
}else {
document.getElementById("dulp").style.display="none"
}
})
}
</script>
</body>
</html>
servlet代码：
@WebServlet(urlPatterns = "/judgeServlet")
public class JudgeServlet extends HttpServlet {
private UserService userService = new UserService();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserInfo> userInfos = userService.selectAll();
String t = request.getParameter("username");
System.out.println(t);
for (UserInfo userInfo : userInfos) {
if(userInfo.getUserName().equals(t)){
response.getWriter().write("true");
return;
}
}
}
}