• 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])

  • 相关阅读:
    大学生简单个人静态HTML网页设计作品 HTML+CSS制作我的家乡杭州 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 HTML5期末大作业
    PHP入门教程3：数组和字符串操作
    kubernetes日志收集 fluent-operator 动态索引名的实现
    【数据结构初阶】二叉树——堆的应用（堆排序 + TOP-K问题）
    搜索引擎项目
    电脑系统没有standard tcp/ip port端口的处理操作
    本地配置启动两个tomcat，并实现简单的nginx负载平衡
    python 语音识别（百度api）
    web前端设计与开发期末作品_期末大作业-疫情
    33-Java循环综合练习：逢7过、求平方根...
  • 原文地址：https://blog.csdn.net/daqi1983/article/details/134078385