一             、下载axios

GitHub地址：https://github.com/axios/axios

注：该页面下面有官方的帮助文档内容 
  
  
  
  
  
  。

 下载zip包到本地后解压

在axios-1.x\dist\esm下找到axios.min.js文件

这个文件就是后面需要导入的文件

二
 
  
 
  
 
  
 
  
 
  
 
  
 、导入文件

首先在IDEA中的webapp文件夹下新建js文件夹             ，将axios.min.js文件拷贝进js文件夹中

 然后新建一个html文件

在html中导入axios.min.js文件

<script src="./js/axios.min.js"></script>

三












、使用axios进行异步请求

准备一个servlet类来处理get/post请求

package com.czx.web.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; 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); response.getWriter().write("hello axios"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("post..."); this.doGet(request, response); } }

在html中加入调用axios相关方法的代码

新建一个script标签
 
  
 
  
 
  
 
  
 
  
 
  
 ，写一个get请求

例如：

<script> axios({ method:"get", url:"http://localhost/ajxa/axiosServlet?username=test" }).then(function (resp) { alert(resp.data); }) </script>

运行tomcat7插件测试一下

网站提示信息

控制面板接收到对应请求及请求的内容

post请求如下：

axios({ method:"post", url:"http://localhost/ajxa/axiosServlet", data:"username=test" }).then(function (resp) { alert(resp.data); })

另外可以调用axios封装的get或post方法来简写代码

axios.get("http://localhost/ajxa/axiosServlet?username=test").then(function (resp) { alert(resp.data); }) axios.post("http://localhost/ajxa/axiosServlet","username=zhangsan").then(function (resp) { alert(resp.data); })

学习axios框架使用的视频为04-Axios-基本使用&请求方式别名_哔哩哔哩_bilibili