前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Axios 入门教程

Axios 入门教程

原创
作者头像
ruochen
发布2022-03-07 11:23:39
1.5K0
发布2022-03-07 11:23:39
举报
文章被收录于专栏:若尘的技术专栏

Axios

  • 引入 axios 的 js 文件 ```html <script src="js/axios-0.18.0.js"></script> ```
  • 使用 axios 发送请求,并获取响应结果 ```js axios({ method: "get", url: "" }).then(function (resp){ alert(resp.data); }) ``` ```js axios({ method: "post", url: "", data: "" }).then(function (resp){ alert(resp.data); }) ```

Get

  • axios-demo.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
代码语言:txt
复制
        <script src="js/axios-0.18.0.js"></script>
代码语言:txt
复制
        <script>
代码语言:txt
复制
            // 1. get
代码语言:txt
复制
            axios({
代码语言:txt
复制
                method: "get",
代码语言:txt
复制
                url: "http://localhost:8080/axios-demo/axiosServlet?username=zhagnsan"
代码语言:txt
复制
            }).then(function (resp) {
代码语言:txt
复制
                alert(resp.data);
代码语言:txt
复制
            })
代码语言:txt
复制
        </script>
代码语言:txt
复制
    </body>
代码语言:txt
复制
</html>
代码语言:txt
复制
```
  • AxiosServlet ```java package com.ruochen.web.servlet;
代码语言:txt
复制
import javax.servlet.*;
代码语言:txt
复制
import javax.servlet.http.*;
代码语言:txt
复制
import javax.servlet.annotation.*;
代码语言:txt
复制
import java.io.IOException;
代码语言:txt
复制
@WebServlet("/axiosServlet")
代码语言:txt
复制
public class AxiosServlet extends HttpServlet {
代码语言:txt
复制
    @Override
代码语言:txt
复制
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
代码语言:txt
复制
        System.out.println("get...");
代码语言:txt
复制
        // 1. 接收请求参数
代码语言:txt
复制
        String username = request.getParameter("username");
代码语言:txt
复制
        System.out.println(username);
代码语言:txt
复制
        // 2. 响应数据
代码语言:txt
复制
        response.getWriter().write("hello Axios~");
代码语言:txt
复制
    }
代码语言:txt
复制
    @Override
代码语言:txt
复制
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
代码语言:txt
复制
        System.out.println("post...");
代码语言:txt
复制
        this.doGet(request, response);
代码语言:txt
复制
    }
代码语言:txt
复制
}
代码语言:txt
复制
```
  • 测试

Post

  • axios.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
代码语言:txt
复制
        <script src="js/axios-0.18.0.js"></script>
代码语言:txt
复制
        <script>
代码语言:txt
复制
            // 1. get
代码语言:txt
复制
            /* axios({
代码语言:txt
复制
                method: "get",
代码语言:txt
复制
                url: "http://localhost:8080/axios-demo/axiosServlet?username=zhagnsan"
代码语言:txt
复制
            }).then(function (resp) {
代码语言:txt
复制
                alert(resp.data);
代码语言:txt
复制
            }) */
代码语言:txt
复制
            axios({
代码语言:txt
复制
                method: "post",
代码语言:txt
复制
                url: "http://localhost:8080/axios-demo/axiosServlet",
代码语言:txt
复制
                data: "username=zhangsan"
代码语言:txt
复制
            }).then(function (resp) {
代码语言:txt
复制
                alert(resp.data);
代码语言:txt
复制
            })
代码语言:txt
复制
        </script>
代码语言:txt
复制
    </body>
代码语言:txt
复制
</html>
代码语言:txt
复制
```
  • AxiosServlet 不用修改

别名方式

Get

代码语言:javascript
复制
axios.get("url").then(function (resp){
	alert(resp.data);
})

Post

代码语言:javascript
复制
axios.post("url", "参数").then(function (resp){
	alert(resp.data);
})

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Axios
    • Get
      • Post
        • 别名方式
          • Get
          • Post
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档