如何快速入门Ajax（学习笔记）—— 原生ajax、jQuery、axios

已于 2022-02-11 14:11:50 修改
阅读量1.5k 收藏 29
点赞数 8
分类专栏： # 前端必备 文章标签： ajax 服务器 javascript
于 2022-02-10 11:45:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45890970/article/details/122855495
版权

如何快速入门Ajax

1. 服务器的基本概念

客户端与服务器

  1. 服务器：上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
  2. 客户端：上网过程中，负责获取和消费资源的电脑，叫做客户端。
    在这里插入图片描述
  3. 客户端与服务器的通信过程
    客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤。网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。
    在这里插入图片描述

URL地址

  1. URL：全称是UniformResourceLocator，中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
  2. 常见的URL举例：
  • http://www.baidu.com
  • http://www.taobao.com
  • http://www.cnblogs.com/liulongbinblogs/p/11649393.html
  1. URL地址的组成部分
    在这里插入图片描述

网页中如何请求数据

  1. 数据，也是服务器对外提供的一种资源。只要是资源，必然要通过 请求 – 处理 – 响应 的方式进行获取。
  2. 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。
  • XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。
  • 最简单的用法 var xhrObj = new XMLHttpRequest()
    在这里插入图片描述

资源的请求方式

在这里插入图片描述

2. 了解Ajax

Ajax是什么

  1. Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
  2. Ajax能让我们轻松实现网页与服务器之间的数据交互。
    在这里插入图片描述

Ajax的应用场景

  • 用户名检测：注册用户时，通过 ajax 的形式，动态检测用户名是否被占用
    在这里插入图片描述
  • 搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表
    在这里插入图片描述
  • 数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据
    在这里插入图片描述
  • 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互
    在这里插入图片描述

3. jQuery中的Ajax

  1. 浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
  2. jQuery 中发起 Ajax 请求最常用的三个方法如下：
 $.get()
 $.post()
 $.ajax()

get()

  1. 介绍在这里插入图片描述
  2. $.get()发起不带参数的请求
    在这里插入图片描述
<body>
  <button id="btnGET">发起不带参数的GET请求</button>

  <script>
    $(function () {
      $('#btnGET').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>

在这里插入图片描述
3. $.get()发起带参数的请求
在这里插入图片描述

<body>
  <button id="btnGETINFO">发起单参数的GET请求</button>

  <script>
    $(function () {
      $('#btnGETINFO').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>

在这里插入图片描述

post()

在这里插入图片描述

<body>
  <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
      $('#btnPOST').on('click', function () {
        $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>

在这里插入图片描述
在这里插入图片描述

ajax()

1.jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

2.使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 ‘GET’ 即可

$.ajax({
   type: 'GET', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
   data: { id: 1 },// 这次请求要携带的数据
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

<body>
  <button id="btnGET">发起GET请求</button>

  <script>
    $(function () {
      $('#btnGET').on('click', function () {
        $.ajax({
          //可以写成'get'
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          // data可省略
          data: {
            id: 1
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

在这里插入图片描述
3. 使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 ‘POST’ 即可

$.ajax({
   type: 'POST', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
   data: { // 要提交给服务器的数据
      bookname: '水浒传',
      author: '施耐庵',
      publisher: '上海图书出版社'
    },
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

<body>
  <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
      $('#btnPOST').on('click', function () {
        $.ajax({
          type: 'POST',
          url: 'http://www.liulongbin.top:3006/api/addbook',
          data: {
            bookname: '史记',
            author: '司马迁',
            publisher: '上海图书出版社'
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

在这里插入图片描述

接口

1.使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

  • http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
  • http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）

2.接口测试工具：PostMan

为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。
好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

  • 访问 PostMan 的官方下载网址 链接 ，下载所需的安装程序后，直接安装即可。

  • 使用PostMan测试GET接口
    在这里插入图片描述

  • 使用PostMan测试POST接口
    在这里插入图片描述

4. form表单的基本使用

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并把采集到的信息提交到服务器端进行处理。

组成部分

表单由三个基本部分组成：表单标签、表单域、表单按钮
在这里插入图片描述

属性

在这里插入图片描述

action

  • action 属性用来规定当提交表单时，向何处发送表单数据。
  • action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
  • 当<form>表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。

注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

target

target 属性用来规定在何处打开 action URL。它的可选值有5个，默认情况下target 的值是 _self，表示在相同的框架中打开 action URL。
在这里插入图片描述

method

它的可选值有两个，分别是 get 和 post。默认情况下method 的值为 get。

  • get 方式适合用来提交少量的、简单的数据。
  • post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
  • 在实际开发中， 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。

enctype

enctype 属性用来规定在发送表单数据之前如何对数据进行编码。它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。
在这里插入图片描述
注意：在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data。

表单的同步提交

  1. 通过点击 submit按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

缺点

在这里插入图片描述

解决方案

表单只负责采集数据，Ajax负责将数据提交到服务器.

  • 当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：
$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

serialize() 函数

为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：
在这里插入图片描述
可以一次性获取到表单中所有的数据
在这里插入图片描述

5. 原生Ajax

XMLHttpRequest的基本使用

  1. XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
    在这里插入图片描述

发起GET请求

  1. 步骤：
  • 创建 xhr 对象
  • 调用 xhr.open() 函数
  • 调用 xhr.send() 函数
  • 监听 xhr.onreadystatechange 事件
    在这里插入图片描述
    注意：xhr.readyState === 4 && xhr.status === 200是固定写法。xhr.responseText是获取服务器的服务器响应回来的数据。
  1. XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：
    在这里插入图片描述

发起带参数的GET请求

  1. 使用 xhr 对象发起带参数的 GET 请求时，只需在调用 xhr.open 期间，为 URL 地址指定参数即可。这种在 URL 地址后面拼接的参数，叫做查询字符串。
    在这里插入图片描述
  2. 查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。
    在这里插入图片描述
  3. 无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。
    在这里插入图片描述

URL编码与解码

  1. URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。
  2. URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。（使用英文字符去表示非英文字符。）
    在这里插入图片描述
  3. 浏览器提供了 URL 编码与解码的 API，分别是：
  • encodeURI() 编码的函数
  • decodeURI() 解码的函数
 <script>
        var str = '焦妮';
        console.log(encodeURI(str));
        console.log(decodeURI('%E7%84%A6%E5%A6%AE'))
    </script>

注意：由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。

使用xhr发起POST请求

在这里插入图片描述
在这里插入图片描述

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

注意：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')是固定写法。

6. 数据交换格式

  1. 数据交换格式：就是服务器端与客户端之间进行数据传输与交换的格式。
  2. 在前端领域经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，所以，我们重点要学习的数据交换格式就是 JSON。
    在这里插入图片描述

XML

  1. XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。
    在这里插入图片描述
  2. XML和HTML的区别
    在这里插入图片描述
  3. XML的缺点
  • XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
  • 在 Javascript 中解析 XML 比较麻烦。

JSON

  1. 概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。
  2. 作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
  3. 现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
  4. 结构：JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。

对象结构

对象结构在 JSON 中表示为 { }括起来的内容。数据结构为{ key: value, key: value, … }的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
在这里插入图片描述

数组结构

数组结构在 JSON 中表示为 [ ]括起来的内容。数据结构为 [ "java", "javascript", 30, true … ]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
在这里插入图片描述

注意事项

在这里插入图片描述

7. XMLHttpRequest Level2

旧版XMLHttpRequest的缺点

  • 只支持文本数据的传输，无法用来读取和上传文件
  • 传送和接收数据时，没有进度信息，只能提示有没有完成

XMLHttpRequest Level2的新功能

在这里插入图片描述

设置HTTP请求时限

在这里插入图片描述

<script>
    var xhr = new XMLHttpRequest()

    // 设置 超时时间
    xhr.timeout = 30
    // 设置超时以后的处理函数
    xhr.ontimeout = function () {
      console.log('请求超时了！')
    }

    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    xhr.send()

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：

 // 1. 新建 FormData 对象
 var fd = new FormData()
 // 2. 为 FormData 添加表单项
 fd.append('uname', 'zs')
 fd.append('upwd', '123456')
 // 3. 创建 XHR 对象
 var xhr = new XMLHttpRequest()
 // 4. 指定请求类型与URL地址
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
 // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
 xhr.send(fd)

FormData对象也可以用来获取网页表单的值，示例代码如下：

// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
   e.preventDefault()
    // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
    var fd = new FormData(form)
    var xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)
    xhr.onreadystatechange = function() {}
})

上传文件

在这里插入图片描述

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>
</body>

显示文件上传进度

新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。

 // 创建 XHR 对象
 var xhr = new XMLHttpRequest()
 // 监听 xhr.upload 的 onprogress 事件
 xhr.upload.onprogress = function(e) {
    // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
    if (e.lengthComputable) {
        // e.loaded 已传输的字节
        // e.total  需传输的总字节
        var percentComplete = Math.ceil((e.loaded / e.total) * 100)
    }
 }

可以基于Bootstrap渲染进度条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>

    <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
            0%
        </div>
    </div>

    <br />
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />

    <script>
        // 1. 获取到文件上传按钮
        var btnUpload = document.querySelector('#btnUpload')
            // 2. 为按钮绑定单击事件处理函数
        btnUpload.addEventListener('click', function() {
            // 3. 获取到用户选择的文件列表
            var files = document.querySelector('#file1').files
            if (files.length <= 0) {
                return alert('请选择要上传的文件！')
            }
            var fd = new FormData()
                // 将用户选择的文件，添加到 FormData 中
            fd.append('avatar', files[0])

            var xhr = new XMLHttpRequest()

            // 监听文件上传的进度
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    // 计算出上传的进度
                    var procentComplete = Math.ceil((e.loaded / e.total) * 100)
                    console.log(procentComplete)
                        // 动态设置进度条
                    $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
                }
            }

            xhr.upload.onload = function() {
                $('#percent').removeClass().addClass('progress-bar progress-bar-success')
            }

            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        // 上传成功
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        // 上传失败
                        console.log('图片上传失败！' + data.message)
                    }
                }
            }
        })
    </script>
</body>

</html>

8. 使用jQuery实现文件上传

在这里插入图片描述

ajaxStart(callback)

Ajax 请求开始时，执行 ajaxStart 函数。$(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。

   
 // 自 jQuery 版本 1.8 起，该方法只能被附加到文档
 $(document).ajaxStart(function() {
     $('#loading').show()
 })

ajaxStop(callback)

Ajax 请求结束时，执行 ajaxStop 函数。

   
 // 自 jQuery 版本 1.8 起，该方法只能被附加到文档
 $(document).ajaxStop(function() {
     $('#loading').hide()
 })

上传文件


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>

  <br />
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

  <script>
    $(function () {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
        $('#loading').show()
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

      $('#btnUpload').on('click', function () {
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>

</body>

</html>

9. axios

Axios是专注于网络数据请求的库。

  • 相比于原生的 XMLHttpRequest 对象，axios 简单易用。
    相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

发起GET请求

在这里插入图片描述

document.querySelector('#btn1').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsObj = { name: 'zs', age: 20 }
      axios.get(url, { params: paramsObj }).then(function (res) {
        //   res.data里才是服务器返回的数据
        console.log(res.data)
      })
    })

发起POST请求

在这里插入图片描述

document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '北京', location: '顺义区' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })

axios发起请求

axios({
     method: '请求类型',
     url: '请求的URL地址',
     data: { /* POST数据 */ },
     params: { /* GET参数 */ }
 }) .then(callback)

get

在这里插入图片描述

document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })

post

在这里插入图片描述

document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
焦妮敲代码
关注
  • 8
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ajax-Axios的快速入门
08-27
axios-0.18.0.js资源包
C#使用Ajax（简单使用）
HongfeiAn
09-11 8585
AJax：是指一种创建交互式网页应用的网页开发技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新. 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 上代码 首先创建一个一般处理程序，用作数据源提供数据。...
AJAX快速入门学习（附带接口学习）——为后期vue学习打基础
Tommy__li的博客
11-11 291
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax能让我们轻松实现网页与服务器之间的数据交互。ajax 的核心是 JavaScript 对象 XmlHttpRequest如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。
Ajax是什么？Ajax和Axios有什么区别？
weixin_43416349的博客
10-19 349
Ajax英文全称为“ Asynchr JavsScript and XML”(异步的JavaScript和XML)。 Ajax核心由XMLHttpRequest、JavsScript、DOM、XML组成。 Ajax作用：可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持Promise...
Ajax之旅
zhaiyuyu的博客
10-12 204
今天我们来聊一聊前后端交互的重要工具AJAX Ajax的全称“Asynchronous Javascript And XML”，即异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术；通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。ajax也是⼀个默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true） 同步请求是指当前发出请求后，浏览器什么都不能做， 必须得等到请求完成返回数据之后，才会执行后续的代码， ...
Ajax快速学习笔记
SunnyMarkLiu
11-02 898
目录   1、 Ajax简介 1 2、 Ajax工作原理框图 1 3、 关于同步和异步 2 4、 Ajax所包含的技术 3 5、 XmlHttpRequest对象 3 6、 AJAX - 向服务器发送请求 5 6.1 open,send方法 5 6.2 post和get 5 6.3 url - 服务器上的文件 6 6.4 异步 - True 或 False 6 7、 AJA
前端与后端连接，Ajax，axios，jquery等练习
最新发布
07-18
前端与后端连接，Ajax，axios，jquery等练习标准案例
13_JavaWeb——AJAX配套资源
05-02
此资源与我的博客13_JavaWeb——AJAX中的两个案例对应，其中Demo5使用AJAX异步处理页面实现对用户输入的实时校验，Demo6使用Axios+JSON完成对品牌列表的展示和添加，取代了先前的JSP。希望有所帮助
Ajax+nodemon+axios等初步了解
04-17
Ajax+nodemon+axios等初步了解, 配合文章 https://blog.csdn.net/m0_51197424/article/details/124230320
ajax axios.get axios.post 方法 聊天机器人前后端交互
04-17
聊天机器人前后端交互 ajax学习
ajax入门 不要畏惧 很简单 进了门一切都好学多了
lovejavalovejava的专栏
03-19 2948
   以前总是听别人说ajax是多么的好，然后自己就去借了本书看，哇塞感觉好难哦，什么介绍javascript,html,css，还有很多一些东西。看的那个难啊，然后就是硬着头皮把它给看完了，但是就是缺少了一步最关键的步骤，运行它。理解它的原理。了解它的机制。去感觉它，触摸它。    现在拿了一个实例自己去练习了一下，发现，嗯，可以感觉到它的存在了。可以触摸到了。好开心啊，还有那些很复杂的介绍
asp.net mvc 使用Ajax调用Action 返回数据。
05-25 196
使用asp.net mvc 调用Action方法很简单。 一、无参数方法。 1、首先，引入jquery-1.5.1.min.js 脚本，根据版本不同大家自行选择。 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> ...
AJAX简单入门
紫羽风的博客
01-02 4223
这些天一直在看AJAX视频，看了视频之后，发现AJAX并不是那么简单，有些知识点理解起来有点困难，而且好多都是陌生的概念，因此想写篇博客来简单的了解一下，对AJAX有一个进一步的认识，然后再接着看视频，完成其中的例子就会好很多了。好了，废话不多说，看内容。       AJAX指“异步JavaScript及XML”（Asynchronous JavaScript And XML）。AJAX是一种
Ajax快速入门
李武杨
02-05 2540
Ajax快速入门 1、在正式介绍Ajax前，需要简短的介绍一下同步交互和异步交互 1， 同步交互 客户端向服务器端发送请求 ——> 等待服务器端处理 ——> 处理完毕返回，这个期间客户端不能做任何其他事情。发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 2， 异步交互 客户端向服务器端发送请求 ——> 等待服务器端处理 ——> 处理完毕返回，这个期间客户端可以做其他事
jQueryAjax学习心得
iamhaizhong的专栏
05-29 898
近来在学习jQueryAjax,通过查阅资料
C#中使用Ajax访问后台方法
kxm1213的博客
03-07 8628
之前学习的过程中,一直使用控件事件进行进行数据的CRUD操作,那么现在摆脱控件,使用Ajax进行方法访问一个简单的Demo,先来写一个xxx.aspx.cs中的方法 String addMethod(String name) { return name+" back"; }前台jQuery做Ajax的时候，服务器端可以调用asp...
如何学习AJAX
邓名富的专栏
01-22 1105
 现在浏览器端以 JavaScript 为核心，基于各种 Web 标准(即:早已完成标准化的XHTML/CSS/DOM/XML/XSLT 和正在进行标准化的XMLHTTP)的技术正在加速整合，Ajax 就是这一系列技术的一个统称。 虽然网络上已经有大量的相关资源，但是为了打好基础，认真读上几本书还是很有必要的。 好在 Ajax 并不是什么全新的技术，它仅仅是传统技术的发展和增值
JavaScript Ajax快速学习
纸上得来终觉浅，绝知此事要躬行
01-18 1040
The Article is from:https://dzone.com/refcardz/getting-started-ajax 建议先看英文再看翻译：翻译使用的是Google翻译。 第一部分 开始 执行Ajax的标准方法是使用XMLHttpRequest对象，友好点称之为XHR。 直接使用XHR，或通过一个有用的Ajax库，如：Prototype或jQuery。 我们
快速学习AJAX之一 Ajax基础
weixin_30710457的博客
07-28 90
大家好，这是一套AJAX的基础教程，首先声明一下我是从事ASP.NET开发 但是我这回讲解的AJAX不是ASP.NET其中的哪些控件的操作。虽然ASP.NET自带的AJAX控件给我们使用AJAX带来了极大的方便 但是我决定我还是要一篇篇的更新 “原生态的AJAX” 呵呵，我也不知道这套教程大概有多少讲，但是有一点我一定将我知道的AJAX完全以...
axios和jquery ajax区别
03-16
axios和jquery ajax的区别在于： 1. axios是基于Promise的，而jquery ajax是基于回调函数的。 2. axios支持浏览器和Node.js环境，而jquery ajax只支持浏览器环境。 3. axios可以拦截请求和响应，而jquery ajax不...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值