Ajax框架Axios的基本使用_在ajax中引用axios

作者：IT小白 | 2024-05-16 12:46:26

踩

在ajax中引用axios

Ajax框架Axios的基本使用

- axios的基本使用
- axios+servlet小案例

axios的基本使用

axios的使用非常简单：

第一步，引入 axios 的 js 文件

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

第二部，使用axios 发送请求，并获取响应结果

发送 get 请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})
1
2
3
4
5
6

发送 post 请求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});
1
2
3
4
5
6
7

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：
method属性设置请求方式，取值为GET,POST等；
url属性用于设置请求资源路径，注意如果是GET请求需要把请求参数拼接在请求路径的后面
data属性用于设置请求参数，请求方式为post，可以使用此属性设置参数
then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

掌握了以上的axios知识通过一个小案例来巩固一下：

axios+servlet小案例

需求：
使用post方式向服务器发送tomcat请求，要求携带参数username=“zhangsan”,并将请求参数通过servlet在控制台上打印出来，还有将请求参数通过服务器响应给客户端
前端实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <script>
        axios({
            method:"post",
            url:"http://localhost:8080/ajax-axios-demo/axiosDemoServlet",
            data:"username=zhangsan"
        }).then(function(resp){
            alert(resp.data);
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

后端实现


@WebServlet("/axiosDemoServlet")
public class AxiosDemoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求参数
        String username = request.getParameter("username");
        System.out.println("获取请求参数："+username);
        response.getWriter().write("username="+username);
    }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在浏览器输入：
http://localhost:8080/ajax-axios-demo/demo1.html
查看响应结果：
在这里插入图片描述
看控制台输出：

至此axios的使用我们已经介绍完了，拜拜本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/578797