Axios的使用

导入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;
            }
        }
    }
}