Axios异步框架

最新推荐文章于 2024-01-27 11:26:31 发布

码农.拉格朗日

最新推荐文章于 2024-01-27 11:26:31 发布

阅读量110

点赞数

分类专栏： Java Web 文章标签： servlet java ajax

本文链接：https://blog.csdn.net/qq_45681515/article/details/130389471

版权

Java Web 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

对原生的AJAX代码进行简化，进行封装

在这里插入图片描述

1. 引入Axios的js文件

在这里插入图片描述

2. 使用axios

2.1 创建html页面

<body>

<script src="js/axios-0.18.0.js"></script>

<script>
    //1. get
   /* axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/
    
    //2. post
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })
    
</script>

</body>

2.2 创建AxiosServlet

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");

        //1. 接收请求参数
        String username = request.getParameter("username");
        System.out.println(username);

        //2. 响应数据
        response.getWriter().write("hello Axios~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request, response);
    }
}

接收发来的请求并解析，并且打印出username，响应数据存入response中，用alert()获取响应的数据

3. axios请求方式别名

其实就是简化书写，但是可读性没有原来的强

在这里插入图片描述

<body>

<script src="js/axios-0.18.0.js"></script>

<script>
    //1. get
   /* axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/

    axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
        alert(resp.data);
    })

    //2. post
    /*axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/

    axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
        alert(resp.data);
    })

</script>

</body>