ajax & axios & json

这篇具有很好参考价值的文章主要介绍了ajax & axios & json。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、ajax

1. 概念

2. 实现方式

   (1)原生的JS实现方式(了解)  

    (2) JQeury实现方式

二、axios 

1. axios 介绍

2. axios特点

3. 官方文档

4. axios使用

(1) axios的基本使用(发送get/post请求)

(2)axios基本使用-获取数据

(3)axios基本使用-传参

(4)axios基本使用-发布书籍

(5)axios基本使用-全局配置

(6)axios验证用户名称是否存在

三、json

1. 概念

2. 语法

     (1)   基本规则

   (2)获取数据

3.  JSON数据和Java对象的相互转换

    (1)JSON转为Java对象(jackson)

    (2) Java对象转换JSON(jackson)

    (3)fastjson用法


一、ajax

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。

参考 原生ajax:AJAX 简介 | 菜鸟教程

1. 概念

       ASynchronous JavaScript And XML    异步的JavaScript 和 XML

       同步和异步:客户端和服务器端相互通信的基础上
        * 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
        * 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

        Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
        通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
        传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

        提升用户的体验

2. 实现方式

   (1)原生的JS实现方式(了解)  

  //1.创建核心对象
     var xmlhttp;
     if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
       }
      else
           {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }


  //2. 建立连接
/*
   参数:
   1. 请求方式:GET、POST
       * get方式,请求参数在URL后边拼接。send方法为空参
       * post方式,请求参数在send方法中定义
   2. 请求的URL:
   3. 同步或异步请求:true(异步)或 false(同步)
    
     */
                xmlhttp.open("GET","ajaxServlet?username=tom",true);
    
 //3.发送请求
                xmlhttp.send();
    
//4.接受并处理来自服务器的响应结果
                //获取方式 :xmlhttp.responseText
                //什么时候获取?当服务器响应成功后再获取
    
                //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
                xmlhttp.onreadystatechange=function()
                {
                    //判断readyState就绪状态是否为4,判断status响应状态码是否为200
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                       //获取服务器的响应结果
                        var responseText = xmlhttp.responseText;
                        alert(responseText);
                    }
                }

    (2) JQeury实现方式

       a.  $.ajax()

            * 语法:$.ajax({键值对});

               //使用$.ajax()发送异步请求
                $.ajax({
                    url:"ajaxServlet1111" , // 请求路径
                    type:"POST" , //请求方式
                    //data: "username=jack&age=23",//请求参数
                    data:{"username":"jack","age":23},
                    success:function (data) {
                        alert(data);
                    },//响应成功后的回调函数
                    error:function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误,会执行的回调函数
    
                    dataType:"text"//设置接受到的响应数据的格式
                });

        b. $.get():发送get请求

            * 语法:$.get(url, [data], [callback], [type])
                * 参数:
                    * url:请求路径
                    * data:请求参数
                    * callback:回调函数
                    * type:响应结果的类型ajax & axios & json,ajax,axios,json

 c.  $.post():发送post请求
            * 语法:$.post(url, [data], [callback], [type])
                * 参数:
                    * url:请求路径
                    * data:请求参数
                    * callback:回调函数
                    * type:响应结果的类型ajax & axios & json,ajax,axios,json

二、axios 

1. axios 介绍

(1)axios 是一个专注于网络请求的库,核心负责发请求和拿数据

(2)axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

2. axios特点

  • 支持客户端发送Ajax请求

  • 支持服务端Node.js发送请求

  • 支持Promise相关用法

  • 支持请求和响应的拦截器功能

  • 自动转换JSON数据

  • axios 底层还是原生js实现, 内部通过Promise封装的

3. 官方文档

axios文档http://www.axios-js.com/

Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js

4. axios使用

(1) axios的基本使用(发送get/post请求)

引入: 下载axios, 引入后才能使用

页面引入axios cdn依赖

​<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function mayiktAxios() {
            // 1. 调用 axios 方法得到的返回值是 Promise 对象
            axios({
                // 请求方式
                method: 'GET',
                // 请求的地址
                url: 'http://localhost:8080/${pageContext.request.contextPath}/axiosServlet',
                // URL 中的查询参数
                params: {
                    name: "mayikt",
                    age: 22
                }
            }).then(function (result) {
                alert(result.data);
            })

        }
    </script>
</head>
<body>

<input type="button" value="发送ajax" onclick="mayiktAxios()"/>

</body>
</html>

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter writer = resp.getWriter();
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        writer.print("mayikt,name:" + name + ",age:" + age);
        writer.close();
    }
}

(2)axios基本使用-获取数据

ajax & axios & json,ajax,axios,json 

<template>
  <div>
    <p>1. 获取所有图书信息</p>
    <button @click="getAllFn">点击-查看控制台</button>
  </div>
</template>

<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {
  methods: {
    getAllFn() {
      axios({
        url: "http://123.57.109.30:3006/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
      }).then((res) => {
        console.log(res);
      });
      // axios()-原地得到Promise对象
    },
  }
};
</script>

(3)axios基本使用-传参

ajax & axios & json,ajax,axios,json

 

<template>
  <div>
    <p>2. 查询某本书籍信息</p>
    <input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
    <button @click="findFn">查询</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      bName: ""
    };
  },
  methods: {
    // ...省略了查询所有的代码
    findFn() {
      axios({
        url: "/api/getbooks",
        method: "GET",
        params: { // 都会axios最终拼接到url?后面
            bookname: this.bName
        }
      }).then(res => {
          console.log(res);
      })
    }
  },
};
</script>

(4)axios基本使用-发布书籍

目标: 完成发布书籍功能

功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台

ajax & axios & json,ajax,axios,json

 

<template>
  <div>
    <p>3. 新增图书信息</p>
    <div>
        <input type="text" placeholder="书名" v-model="bookObj.bookname">
    </div>
    <div>
        <input type="text" placeholder="作者" v-model="bookObj.author">
    </div>
    <div>
        <input type="text" placeholder="出版社" v-model="bookObj.publisher">
    </div>
    <button @click="sendFn">发布</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      bName: "",
      bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
          bookname: "",
          author: "",
          publisher: ""
      }
    };
  },
  methods: {
    // ...省略了其他代码
    sendFn(){
       axios({
           url: "/api/addbook",
           method: "POST",
           data: {
               appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
               ...this.bookObj
            // 等同于下面
            // bookname: this.bookObj.bookname,
            // author: this.bookObj.author,
            // publisher: this.bookObj.publisher
           }
       }) 
    }
  },
};
</script>

(5)axios基本使用-全局配置

目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置

axios.defaults.baseURL = "http://123.57.109.30:3006"

// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {
    axios({
        url: "/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
    }).then((res) => {
        console.log(res);
    });
    // axios()-原地得到Promise对象
},

(6)axios验证用户名称是否存在

需求:当我们用户输入用户名称之后(会使用ajax验证用户名称是否已经存在 如果存在的话 则提示 该用户名称是已经存在的)

onkeyup---监听用户输入完内容 走监听方法

@WebServlet("/exUserNameServlet")
public class ExUserNameServlet extends HttpServlet {
    
    private MayikUsertService mayikUsertService = new MayikUsertService();
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        //1.获取到用户输入的userName参数值
        String userName = req.getParameter("userName");
        //2.调用数据库根据userName查询用户名称是否存在
        MayiktUserEntity mayiktUserEntity = mayikUsertService.findByUserName(userName);
        PrintWriter writer = resp.getWriter();
        if (mayiktUserEntity != null) {
            writer.print("该用户" + userName + "已经存在的 无法注册!");
        }
        writer.close();
    }
}
<%--
  Created by IntelliJ IDEA.
  User: mayikt
  Date: 2022/6/6
  Time: 17:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>注册页面</title>
    <form action="/mayikt_session_war_exploded/register" method="post">
        <label>用户名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
        <label>密&nbsp&nbsp&nbsp码: </label><input type="password" name="userPwd"/><br>
        <label>验证码: </label><input type="text" name="code"/><img id="exchangecode" src="VerifycodeServlet">
        <a id="ecode" href="#">看不清?换一张图片</a><br>
        <span id="error" style="color: red">${errorMsg}</span>
        <input type="submit" value="注册"/>
    </form>
    <script type="text/javascript">
        window.onload = function () {
            //获取img标签的对象
            img = document.getElementById("exchangecode");
            img.onclick = function () {
                //加时间戳,避免浏览器缓存
                var date = new Date().getTime()
                img.src = "VerifycodeServlet?" + date;
            }
            //获取a标签的对象
            ec = document.getElementById("ecode");
            ec.onclick = function () {
                //加时间戳
                var date = new Date().getTime()
                img.src = "VerifycodeServlet?" + date;
            }
        }

    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function mayiktAxios(object) {
            // 1.接受用户输入的userName
            var userName = object.value;
            // 2.使用Axios 发送ajax请求验证 userName是否存在的
            axios({
                // 请求方式
                method: 'GET',
                // 请求的地址
                url: 'http://localhost:8080${pageContext.request.contextPath}/exUserNameServlet',
                // URL 中的查询参数
                params: {
                    userName: userName,
                }
            }).then(function (result) {
                //定位 span  id 名称 error 修改
                document.getElementById("error").innerText = result.data;
            })
        }
    </script>
</head>
</html>

三、json

1. 概念

    JavaScript Object Notation        JavaScript对象表示法

    Person p = new Person();
    p.setName("张三");
    p.setAge(23);
    p.setGender("男");

    var p = {"name":"张三","age":23,"gender":"男"};

    * json现在多用于存储和交换文本信息的语法
    * 进行数据的传输
    * JSON 比 XML 更小、更快,更易解析。

2. 语法

     (1)   基本规则

        * 数据在名称/值对中:json数据是由键值对构成的
            * 键用引号(单双都行)引起来,也可以不使用引号
            * 值得取值类型:
                1. 数字(整数或浮点数)
                2. 字符串(在双引号中)
                3. 逻辑值(true 或 false)
                4. 数组(在方括号中)    {"persons":[{},{}]}
                5. 对象(在花括号中) {"address":{"province":"陕西"....}}
                6. null
        * 数据由逗号分隔:多个键值对由逗号分隔
        * 花括号保存对象:使用{}定义json 格式
        * 方括号保存数组:[]

   (2)获取数据

        a. json对象.键名
        b. json对象["键名"]
        c. 数组对象[索引]
        d. 遍历
                 //1.定义基本格式
                var person = {"name": "张三", age: 23, 'gender': true};  

 var ps = [{"name": "张三", "age": 23, "gender": true},
                    {"name": "李四", "age": 24, "gender": true},
                    {"name": "王五", "age": 25, "gender": false}];

     //获取ps中的所有值
                for (var i = 0; i < ps.length; i++) {
                    var p = ps[i];
                    for(var key in p){
                        alert(key+":"+p[key]);
                    }
                }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonDemo</title>
    <script>
        // 1.定义json
        var json1 = {name: "mayikt", age: 22, isFlag: true};
        alert(json1.name);
        alert(json1.age);
        alert(json1.isFlag);
        // 2.定义json数组
        var jsonArr = {code: 200, data: [{name: "mayikt", age: 22}, {name: "meite", age: 22}]};
        alert(jsonArr.code);
        alert(jsonArr.data[0].name);
        var userArr = jsonArr.data;
        for (var i = 0; i < userArr.length; i++) {
            alert(userArr[i].name + "," + userArr[i].age);
        }
    </script>
</head>
<body>

</body>
</html>

3.  JSON数据和Java对象的相互转换

    * JSON解析器:
        * 常见的解析器:Jsonlib,Gson,jackson   , fastjson

    (1)JSON转为Java对象(jackson)

        (1) 导入jackson的相关jar包
        (2)创建Jackson核心对象 ObjectMapper
        (3)调用ObjectMapper的相关方法进行转换
                  readValue(json字符串数据,Class)ajax & axios & json,ajax,axios,json

 ajax & axios & json,ajax,axios,json

   (2) Java对象转换JSON(jackson)

          使用步骤:

            a. 导入jackson的相关jar包
            b. 创建Jackson核心对象 ObjectMapperajax & axios & json,ajax,axios,json
            c. 调用ObjectMapper的相关方法进行转换
                (a) 转换方法:

(1) mapper.writeValueAsString(obj):将对象转为json字符串 

(2) mapper.writeValue(参数1,obj):
    参数1:
         File:将obj对象转换为JSON字符串,并保存到指定的文件中
         Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
         OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中

ajax & axios & json,ajax,axios,json

 ajax & axios & json,ajax,axios,json

ajax & axios & json,ajax,axios,json

(b)注解:

    @JsonIgnore:排除属性。
    @JsonFormat:属性值得格式化

  @JsonIgnore:转换后直接不显示

ajax & axios & json,ajax,axios,json

ajax & axios & json,ajax,axios,json

ajax & axios & json,ajax,axios,json

 ajax & axios & json,ajax,axios,json

 

@JsonFormat(pattern = "yyyy-MM-dd")

ajax & axios & json,ajax,axios,json

ajax & axios & json,ajax,axios,json

ajax & axios & json,ajax,axios,json

ajax & axios & json,ajax,axios,json

(c)复杂java对象转换
                     List:数组
                     Map:对象格式一致ajax & axios & json,ajax,axios,json

(3)fastjson用法

文档:javaweb开发相关资料下载.notea

链接:有道云笔记

ajax & axios & json,ajax,axios,json文章来源地址https://www.toymoban.com/news/detail-611471.html

public class Test01 {
    public static void main(String[] args) {
        //1.将数据对象变成json(字符串类型)
        MayiktUserEntity user1 = new MayiktUserEntity(1, "mayikt", "mayikt");
        MayiktUserEntity user2 = new MayiktUserEntity(1, "mayikt", "mayikt");
        String json1 = JSONObject.toJSONString(user1);
        System.out.println(json1);
        //2.嵌套json
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code", 200);
        jsonObject.put("msg", "ok");
        //data值 数组类型
        ArrayList<MayiktUserEntity> mayiktUserEntities = new ArrayList<>();
        mayiktUserEntities.add(user1);
        mayiktUserEntities.add(user2);
        jsonObject.put("data", mayiktUserEntities);
        System.out.println(jsonObject.toJSONString());
    }
}


public class Test02 {
    public static void main(String[] args) {
        String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
        // string类型-----jsonobject----jsonobject
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
//        Integer code = (Integer) jsonObject.get("code");
        Integer code = jsonObject.getInteger("code");
        String msg = jsonObject.getString("msg");
        System.out.println(code + "," + msg);
        JSONArray data = jsonObject.getJSONArray("data");
        for (int i = 0; i < data.size(); i++) {
            JSONObject object = (JSONObject) data.get(i);
            Integer id = object.getInteger("id");
            String userName = object.getString("userName");
            String userPwd = object.getString("userPwd");
            MayiktUserEntity mayiktUserEntity = new MayiktUserEntity(id, userName, userPwd);
            System.out.println(mayiktUserEntity);
        }
    }
}

public class Test03 {
    public static void main(String[] args) {
        String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
        Result result = JSONObject.parseObject(jsonStr, Result.class);
        // java序列化技术 将 json变成对象
        System.out.println(result);
    }
}

public class Result {
    private Integer code;
    private String msg;
    private List<MayiktUserEntity> data;

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }


    public List<MayiktUserEntity> getData() {
        return data;
    }

    public void setData(List<MayiktUserEntity> data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }
}
    axios({
        method: "post",
        url: "${pageContext.request.contextPath}/user/addUser",
        data: JSON.stringify(userList),
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    }).then(resp => {

    })

到了这里,关于ajax & axios & json的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Ajax】如何通过axios发起Ajax请求

    ✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学   Node.js教学 从头开始学习   ajax学习 Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请

    2024年02月02日
    浏览(54)
  • 【AJAX框架】AJAX入门与axios的使用

    在现代Web开发中,异步JavaScript和XML(AJAX)已经成为不可或缺的技术之一。AJAX使得网页能够在不刷新整个页面的情况下与服务器进行数据交互,为用户提供更加流畅和动态的体验。本文将介绍AJAX的基本概念,并深入探讨如何使用axios这一强大的JavaScript库进行AJAX请求。 AJAX的核

    2024年01月24日
    浏览(46)
  • 【Ajax】笔记-Axios与函数发送AJAX请求

    1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装; 2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。 ajax: 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQuery整个项目太大,单纯使用

    2024年02月16日
    浏览(43)
  • axios ( ajax pro )

    根据我的理解就是对于原生ajax的一个封装,以达到方便使用异步刷新的目的。 ajax是什么呢?(Asynchronous JavaScript And XML,异步的JavaScript和XML) 首先要理解异步刷新,简单来说就是一个对于一个前端页面,总体的页面内容不刷新,局部的页面进行刷新,比如:大家都进行过网购

    2024年02月16日
    浏览(35)
  • Ajax和axios基础

    Asynchronous JavaScript And XML 异步的JavaScript和XML 作用 数据交换: 通过Ajax可以给服务器发送请求,服务器将数据直接响应回给浏览器. 异步交互: 可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术. 同步和异步 同步发送请求: 浏览器发送请求给服务器,服务

    2024年04月28日
    浏览(26)
  • AJAX与axios框架

    提示:这里可以添加本文要记录的大概内容: 通过 ajax 进行前后端交互 此项目用到了javaweb知识 首先创建JavaWeb项目编写代码: 运行结果: 接下来创建vue项目 创建完项目进入安装Axios框架 npm i axios 打开根组件删掉全部代码重新生成 在template标签内加上一个按钮 接下来在met

    2024年02月16日
    浏览(41)
  • axios和Ajax

    官网:https://axios-http.com/zh/ CDN:https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js axios是一个请求库,在浏览器环境中,它封装了XHR,提供更加便捷的API发送请求 axios的基本用法为: axios允许开发者先创建一个实例,后续通过使用实例进行请求 这样做的好处是可以预先进行某些配

    2024年02月05日
    浏览(42)
  • 【AJAX】axios发送请求

    引入axios 以下是axios的GET请求格式: 以下是axios的POST请求格式: 注意:params中的键值对数据是拼接在url上,无论是post还是get请求。 axios

    2024年02月13日
    浏览(56)
  • 9-AJAX-下-axios

    上古浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据,但是从服务器端发送的却是整个页面的数据,十分消耗网络资源。而我们只是需要修改页面的部分数据,

    2024年02月07日
    浏览(37)
  • Ajax 与 Axios 异步请求

    1. 网页中如何请求数据 2. 资源的请求方式 客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 get 和 post 请求。 get 请求通常用于获取服务端资源(向服务器要资源) post 请求通常用于向服务器提交数据(往服务器发送资源) 1. 什么是Ajax 2. 为什么要学

    2024年03月28日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包