Axios 入门教程

举报
ruochen 发表于 2022/03/03 22:24:57 2022/03/03
【摘要】 AxiosGetPost别名方式GetPost Axios 引入 axios 的 js 文件<script src="js/axios-0.18.0.js">&l...

Axios

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

Get

  • axios-demo.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
    
            <script src="js/axios-0.18.0.js"></script>
            <script>
                // 1. get
                axios({
                    method: "get",
                    url: "http://localhost:8080/axios-demo/axiosServlet?username=zhagnsan"
                }).then(function (resp) {
                    alert(resp.data);
                })
            </script>
        </body>
    </html>
    
  • AxiosServlet
    package com.ruochen.web.servlet;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    
    @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);
        }
    }
    
  • 测试

Post

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

别名方式

Get

axios.get("url").then(function (resp){
	alert(resp.data);
})

Post

axios.post("url", "参数").then(function (resp){
	alert(resp.data);
})

文章来源: ruochen.blog.csdn.net,作者:若尘,版权归原作者所有,如需转载,请联系作者。

原文链接:ruochen.blog.csdn.net/article/details/123169269

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。