• axios入门

    Axios 对原生的AJAX进行封装，简化书写。

    Axios官网是：https://www.axios-http.cn

    基本使用

    axios 使用是比较简单的，分为以下两步：

    引入axios 的 js 文件

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

    • 发送 get 请求

    1. axios({//大括号代表一个js对象
    2.     method:"get",
    3.     url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
    4. }).then(function (resp){
    5.     alert(resp.data);
    6. })
    •  发送 post 请求
    1. axios({
    2.     method:"post",
    3.     url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    4.     data:"username=zhangsan"
    5. }).then(function (resp){
    6.     alert(resp.data);
    7. });

    axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

    • method 属性：用来设置请求方式的。取值为 get 或者 post。

    • url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。

    • data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

    then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

    快速入门

    后端实现  

    1. @WebServlet("/axiosServlet")
    2. public class AxiosServlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5.         System.out.println("get...");
    6.         //1. 接收请求参数
    7.         String username = request.getParameter("username");
    8.         System.out.println(username);
    9.         //2. 响应数据
    10.         response.getWriter().write("hello Axios~");
    11.     }
    12.  
    13.     @Override
    14.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    15.         System.out.println("post...");
    16.         this.doGet(request, response);
    17.     }
    18. }

    前端实现

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. <script src="js/axios-0.18.0.js">script>
    10. <script>
    11.     //1. get
    12.    /* axios({
    13.         method:"get",
    14.         url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    15.     }).then(function (resp) {
    16.         alert(resp.data);
    17.     })*/
    18.  
    19.     //2. post  在js中{} 表示一个js对象，而这个js对象中有三个属性
    20.     axios({
    21.         method:"post",
    22.         url:"http://localhost:8080/ajax-demo/axiosServlet",
    23.         data:"username=zhangsan"
    24.     }).then(function (resp) {
    25.         alert(resp.data);
    26.     })
    27. script>
    28. body>
    29. html>

    请求方法别名 

    为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

    • get 请求 ： axios.get(url[,config])

    • delete 请求 ： axios.delete(url[,config])

    • head 请求 ： axios.head(url[,config])

    • options 请求 ： axios.option(url[,config])

    • post 请求：axios.post(url[,data[,config])

    • put 请求：axios.put(url[,data[,config])

    • patch 请求：axios.patch(url[,data[,config])

  • 相关阅读:
    Git使用教程
    华为率先商用卫星通信技术，有助中国在6G技术上取得领先优势
    java SpringBoot基础
    《小狗钱钱》阅读笔记（五）
    《算法导论》16.3 赫夫曼编码（含C++代码）
    Kubernetes开放接口：CRI、CNI、CSI
    Flask框架：如何运用Ajax轮询动态绘图
    波束形成,通过matlab仿真不同参数的波束形成以及旁絆级
    Python编程指南：利用HTTP和HTTPS适配器实现智能路由
    Android studio的Bumblebee版本Gradle7.2降到Gradle4.2.0详细步骤记录（项目已上传）
  • 原文地址：https://blog.csdn.net/daqi1983/article/details/134078385