Ajax

服务器和客户端

服务器本质上是一台电脑，客户端在前端开发中指的是浏览器

URL 地址，表示服务器上每个资源的确切位置，服务器上的每个资源都对应中独一无二的url地址

对数据的不同的操作（增删改查）也对应不同的地址

客户端提出请求，服务器响应，然后返回数据给客户端上渲染

Ajax

中文官网地址：https://www.axios-http.cn/

英文官网地址：https://www.npmjs.com/package/axios

它的英文全称是 Asynchronous Javascript And XML，简称 Ajax

是用来实现客户端网页请求服务器的数据

同步和异步xml

同步就是按照代码顺序执行下去，上面的程序没有执行玩，会阻塞下面代码的执行

异步就是程序执行互不干扰，程序在执行的过程中不会阻塞其他程序的执行

xml是一种数据格式，类似于html

早先前端后端发送的格式就是xml格式

现在常用的格式是json格式（轻量级）

JSON 目前的主流方式 - json 是一种类似对象的字符串

异步是 一种 非阻塞 方式的代码执行过程 如 ajax、setInterval、setTimeout

使用Ajax请求数据的五种方式

增加 --post

向服务器新增数据

查询 -- get

从服务器获取数据

删除-- delete

删除服务器上的数据

修改--全部 --put

更新服务器上的数据，侧重于完整更新

修改--局部-- patch

更新服务器上的数据，侧重于局部更新

axios

axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库

axios的基本语法

axios({
  method : '请求类型',
  url : '请求地址'
}).then(result => {
    console.log(result)  // result是请求成功后返回的结果
})

get请求

文档出现的参数query，传递的参数params

基于axios发起的get的请求

参数的传递

一种是params

一种是直接url上面拼接，在params上拼接错误

axios({
    method : 'get',
    url : 'http://www.itcbc.com:3006/api/getbooks'
})
.then(result => {
    console.log(result)
})

get请求查询的参数 --查询相对应的数据

axios({
    method : 'get',
    url : 'http://www.itcbc.com:3006/api/getbooks',
    params : {
        bookname : '林黛玉倒拔垂杨柳'
    }
})
.then(result => {
    console.log(result)
})

在get请求中携带多个查询参数

直接在params里面添加

post请求

文档出现的参数body，传递的参数data

基于axios发起的post的请求

参数的传递

第一种是在data中直接拼接

还有就是将参数以对象的方式在data中传参

axios({
    method : 'post',
    url : 'http://www.itcbc.com:3006/api/addbook'，
    data : {
        bookname: '西游记'，
        author : '吴承恩'，
        publisher : '黑马出版社'
    }
})
.then(result => {
    console.log(result)
})

delete请求

文档出现的参数query，传递的参数params

或者在url上添加参数

  <body>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script src="../lib/axios.js"></script>
    <script>
      // 获取到数据渲染到页面上，然后点击删除按钮是删除对应的数据，每次数据变化都重新渲染
      //   获取元素
      const tbody = document.querySelector("tbody");
      //   将渲染进行封装，以便复用
      function render() {
        axios({
          method: "get",
          url: "http://www.itcbc.com:3006/api/getbooks",
        }).then((result) => {
          console.log(result.data.data);
          const list = result.data.data;
          const arr = list
            .map(
              (item) => `<tr>
          <td>${item.id}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td><button data-id = '${item.id}'>删除</button></td>
        </tr>`
            )
            .join("");
          tbody.innerHTML = arr;
        });
      }
      //  开始调用渲染
      render();
      //   删除，使用事件委托
      tbody.addEventListener("click", function (e) {
        // console.log(e.target.tagName);
        // 当点击按钮时删除对应的数据，在创建按钮时添加id
        if (e.target.tagName === "BUTTON") {
          console.log(e.target.dataset.id); // 获得每个按钮对应的数据的id
          axios({
            method: "delete",
            url: "http://www.itcbc.com:3006/api/delbook",
            //   删除对应的参数用params
            params: {
              id: e.target.dataset.id,
            },
          }).then((result) => {
            console.log(result);
            // 删除之后重新渲染
            render();
          });
        }
      });
    </script>
  </body>

put请求

文档出现的参数body，传递的参数data

基于axios发起的post的请求

 // 编辑完数据，然后点击确定时将修完的数据更新给后端，然后重新渲染
      // 事件委托
      form.addEventListener("submit", function (e) {
        e.preventDefault();
        console.log(id);
        const str = $(".modal-update form").serialize();
        console.log(str);
        axios({
          method: "put",
          url: "http://www.itcbc.com:3006/api/updatebook",
          data: str + `&id=${id}&appkey=2983193a`,
        }).then((result) => {
          console.log(result);
          // 修改成功后将编辑框隐藏，然后重新渲染
          div.style.display = "none";
          render();
        });
      });

修改的步骤 ：

1.先给列表中编辑按钮绑定点击事件，动态多个的使用事件委托

2.点击按钮之后会显示弹窗 可以用第三方的库快速实现

3.在弹窗中显示被编辑的数据，也就是需要修改的数据

获取需要修改数据的id，然后将id发送给后端，获取到后端返回的对应id的数据，再将数据设置到表单中

4.用户在弹窗的表单中编辑数据，编辑好后点击确定

5.获取到表单中的数据，拼接成参数，发送给后端，完成编辑

6.后端提示编辑成功，关闭弹窗，重新渲染页面

如果不想修改，点击取消，取消按钮为reset类型，点击重置表单内容，给表单绑定重置事件，触发后关闭弹窗

axios 全局配置 & 拦截器

全局配置请求根路径

在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径” 又叫基地址

提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径

方便后期修改接口地址

语法：

// 设置全局配置，请求根路径
axios.defaults.baseURL = "http://www.itcbc.com:3006";

拦截器

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应

// 拦截器
// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    //document.body.style.backgroundColor = "pink";
    //document.body.style.transition = "5s";
    // 请求发送之前背景颜色设置为pink
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    //document.body.style.backgroundColor = "green";
    // 请求响应之后背景颜色改变为绿色
    return response;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）

每个接口都有对应的请求方式

接口文档就是接口的使用说明书，它是我们调用接口的依据

组成部分

接口名称

接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口

接口地址

客户端发起 Ajax 调用此接口时，请求的 URL 地址

请求方式

接口的请求方式，如：GET、POST、PUT、DELETE 等

请求参数

请求此接口时，需要发送到服务器的查询参数或请求体

返回示例

当接口请求成功后，服务器响应回来的数据的基本格式

返回参数说明

接口响应结果的详细描述

接口文档最重要的三个部分

url地址
请求的方式

get参数一定是params，参数通过在url的？后面拼接实现，自动 ？前面是请求地址，后面是参数

post参数一定是data 携带的参数不是在url上，直接看不见

参数

form表单

网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮

HTML 的 <form> 就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域

表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器

form表单提交

form标签中的按钮默认为type= 'submit'的类型，点击会自动提交表单数据并且会刷新页面

解决方法

1.移除form标签

2.给button标签添加type = 'button' 属性

3.在form的提交事件中阻止默认行为 事件对象.preventDefault();

快速获取表单数据

必须条件

1.有form标签

2.form中的input标签，必须有name属性

3.使用jq的方法 序列化方法 $('form').serialize()

jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据   

语法：  **$('表单元素的选择器').serialize();**

// 序列化 => 快速把数据 转成 字符串的能力
// 反序列化 =>  字符串 => 解析成原本的样子（对象 数组）

<body>
    <form autocomplete="off">
      <input type="text" name="bookname" />
      <input type="text" name="author" />
      <input type="text" name="publisher" />
      <button>新增</button>
    </form>
    <script src="../lib/axios.js"></script>
    <script src="../lib/jquery.js"></script>
    <script>
      //   需求： 用jq快速获取表单数据，增加书籍
      // 获取表单元素
      const form = document.querySelector("form");
      //   console.log(form);
      //   给表单注册提交事件
      form.addEventListener("submit", function (e) {
        //   阻止默认行为
        e.preventDefault();
        // console.log(123);
        // 使用jq的方法快速获取表单的数据
        const a = $("form").serialize();
        // console.log(a); bookname=12&author=23&publisher=34
        axios({
          method: "post",
          url: "http://www.itcbc.com:3006/api/addbook",
          data: a + `&appkey=2983193a`,
        }).then((result) => {
          console.log(result);
        });
      });
    </script>
  </body>

使用该方法得到的结果是一个查询字符串结构：name=value&name=value

该方法 能够 获取 隐藏域的值

该方法不能得到禁用状态的值

该方法不能得到文件域中的文件信息，所以不能完成文件上传

form两种事件

submit提交事件 绑定条件

1.出现form标签

2.form标签上的按钮为type='submit' 表单中的按钮默认为submit类型

3.点击按钮

reset重置事件 绑定条件

1.form标签

2.按钮类型设置为 type = 'reset'

3.点击reset

4.点击重置类型的按钮会自动清空掉表单中所有input标签的值，然后会触发表单的reset事件

autocomplete = 'off'

给form添加这个属性，可以清空input标签的历史记录

快速给表单赋值，可以用for in遍历对象赋值

 // 将获得的数据赋值给要编辑的输入框
            const obj = result.data.data[0]; //id值对应的数组中唯一一个对象
            // console.log(obj);
            // document.querySelector("[name=bookname]").value = obj.bookname;
            // document.querySelector("[name=author]").value = obj.author;
            // document.querySelector("[name=publisher]").value = obj.publisher;
            // 将获得的对象数据赋值给输入框的值
            // 使用for in 遍历对象  key为对象中每一个属性名
            for (const key in obj) {
              document.querySelector(`[name=${key}]`).value = obj[`${key}`];
            }
          });

FormData

FormData 是一个浏览器对象。用于管理表单数据

FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据

典型应用场景：FormData + Ajax 技术实现文件上传的功能

通过new来使用

文件上传步骤：

1.写一个input标签 类型为 type = 'file'

2.给input 标签绑定change事件 ，输入框内容发生改变就触发

3.通过input.files 来获取上传文件的对应数据数组对象

4.可以将文件图片直接显示在前端页面，不需要后台的帮助 ，使用URL.createObjectURL()中的内存文件的src获取

 <body>
    <img src="" alt="" />
    <input type="file" name="" id="" />
    <script src="./lib/axios.js"></script>
    <script src="./lib/common.js"></script>
    <script>
      const input = document.querySelector('input');

      input.addEventListener('change', function () {
        const file = input.files[0]; // 文件存在浏览器的内存中
        // 可以把浏览器内存中图片 的src地址获取出来
        const src = URL.createObjectURL(file);
        document.querySelector('img').src = src;
      });
    </script>
  </body>

5.使用formdata对象来包装好文件

6.使用axios携带对应的参数formdata对象来完成文件的上传

<body>
    <!-- 写一个file的input标签 -->
    <input type="file" />  //文件上传输入框  file
    <script src="../lib/axios.js"></script>
    <script src="../lib/common.js"></script>
    <script>
      // 获取input事件
      // 给input绑定change事件
      const input = document.querySelector("input");
      input.addEventListener("change", function () {
        //   通过input.files来获取上传的文件数组
        console.log(input.files);
        const fe = input.files[0];  // 对象
        // 创建一个formdata对象
        const fd = new FormData();
        // 使用这个对象来包装文件
        // fd.append(key,value) key写什么看接口文档
        fd.append("avatar", fe); // 将上传的文件对象追加给fd中，fd直接可以添加到参数中
        // 根据接口文档，完成文件的上传
        axios({
          method: "post",
          url: "/api/formdata",
          data: fd,
        }).then((result) => {
          console.log(result);
        });
      });
    </script>
  </body>

FormData和serialize的区别

都需要设置表单各项的name属性

都能快速收集表单数据

都能够获取到隐藏域（<input type="hidden" />）的值

都不能获取禁用状态（disabled）的值

不同点

FormData属于原生的代码；serialiaze是jQuery封装的方法

FormData可以收集文件域（<input type="file"/>）的值，而serialize不能。如果有文件上传，则必须使用FormData。

得到的结果的数据类型不一样（知道即可）

input标签的属性

文件域：<input type="file" />

选择一个或多个文件

根据文件域，找到它的 files 属性。files属性是一个伪数组，里面包含了一个或多个文件对象

accept 属性：控制能够选择的文件类型，比如 accept="image/png,image/jpeg"

multiple 属性：控制是否可以多选文件

hidden 属性 ： 控制文件是否隐藏 隐藏域 ：不占位置也看不见，但是可以用jq来获取里面的值

URLSearchParams

可以配合formdata实现快速获取表单数据的功能

FormData 快速获取表单数据，存在内部中

URLSearchParams 把formdata数据 转成 a=1&b=2... 发送请求支持的字符串格式

请求报文和响应报文

请求报文

组成部分：

请求行 request line

请求方式，请求地址，协议类型

请求头 header 用来描述这次请求的基本信息

请求体 要发送给服务器的数据

get没有请求体，参数写在url上面，其他post，delete，put，patch都有请求体

post的请求体的三种格式 对应请求头中的内容类型，Content-type

1.a=1&b=2 字符串拼接 Content-type ： application/x-www-form-urlencoded

2.json格式 Content-type ： application/json

3.FormData格式 Content-type ： multipart/form-data

接口文档一般都有说明

空格

响应报文

组成部分

响应行 状态行

协议版本，状态码，状态描述

响应头

用来描述这次响应的基本信息

响应体

服务器响应给用户端的具体信息

空格

url参数

常用的5种请求方式，都可以在URL后面携带请求参数

由于URL的长度有限制，所以请求参数一般都比较小，比如不能做文件上传

常用的请求参数有两种写法

/api/xxx?参数=值&参数=值

这种格式的字符串叫做查询字符串，所以这样的参数叫做查询参数

/api/xxx/值/值

Restful 风格的接口用这种格式的参数

axios中 如何携带不同格式的请求参数

第一种格式的参数：（/api/xxx?参数=值&参数=值）

第二种格式的参数：（ /api/xxx/值/值）

http响应状态码

http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态

常用的http响应状态码

2xx 成功

3xx 重定向 成功

4xx 前端的错误

5xx 后端的错误

业务状态码

每个公司都有自己的一套标准-- 错误码

作用 ：更加清楚的描述这次执行情况的状态

http响应状态码和业务状态码的区别

1.所处的位置不同

在响应头的状态行中所包含的状态码，或者请求列表中的Status，叫做“响应状态码”

响应体的数据中所包含的状态码（案例中叫做code），叫做“业务状态码”

2.表示结果不同

响应状态码只能表示这次请求的成功与否（成功或失败了）

业务状态码用来表示这次业务处理的成功与否

3.通用性不同

响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用

业务状态码是后端程序员自定义的，不具有通用性

原生代码

原生ajax代码

基本步骤

1.创建实例

const xhr = new XMLHttpRequest()

2.调用open方法

xhr.open() 中间有两个参数

第一个是请求类型 method

第二个是请求的url get请求在url后面拼接参数

post请求，不能拼接

3.设置请求头中的内容类型

xhr.setRequestHeader("Content-Type", "application/json") 键值对，值根据post请求的数据格式来写

4.开始发送

xhr.send()

post请求携带参数 放在send里面

5.监听服务端响应

xhr.response 拿到响应的数据

xhr.addEventListener("load", function () {
        console.log(this.response);
      });

JSON格式

JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据

用字符串的方式来表示的对象或数组类型的数据，叫做 JSON 数据

JSON 数据的格式有两种：

对象格式

数组格式

使用 JSON 定义 JSON 格式的数据时，要遵守以下的 6 条规则：

1.属性名必须使用双引号包裹

2.字符串类型的值必须使用双引号包裹

3.JSON 中不允许使用单引号表示字符串

4.JSON 中不能写注释

5.JSON 的最外层必须是对象或数组格式（其他类型也可以，但多数是对象或数组格式）

6.不能使用 undefined 或函数作为 JSON 的值

对象格式的 JSON 数据，最外层使用 { } 进行包裹，内部的数据为 "key": "value" 的键值对结构。

其中：key 必须使用英文的双引号进行包裹

value 的值只能是字符串、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种）

数组格式的 JSON 数据，最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文的 , 分隔。

其中：每一项的值类型只能是字符串、数字、布尔值、null、数组、对象这 6 种类型之一

调用浏览器内置的 JSON.parse() 函数，可以把 JSON 格式的字符串转换为 JS 数据

调用浏览器内置的 JSON.stringify() 函数，可以把 JS 数据转换为 JSON 格式的字符串

序列化和反序列化

把真实数据转换为字符串的过程，叫做序列化

把字符串转换为真实数据的过程，叫做反序列化

ajax请求代码

XMLHttpRequest是浏览器内置的一个构造函数

作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！

get请求

<script>
      // 1.new 出实例
      const xhr = new XMLHttpRequest();
      // 2.使用open方法来指定请求类型和请求地址  get请求的参数是写在url上的 直接拼接即可
      xhr.open("get", "http://www.itcbc.com:3006/api/getbooks?appkey=2983193a");
      // 3.使用send方法发送出去
      xhr.send();
      // 4.监听服务器响应
      xhr.addEventListener("load", function () {
        // 打印后端响应的数据
        console.log(this.response);
        // console.log(typeof this.response); //json 字符串类型
        console.log(JSON.parse(this.response)); // 转复杂数据类型
      });
</script>

post请求--参数为字符串类型

<script>
      const xhr = new XMLHttpRequest();
      xhr.open("post", "http://www.itcbc.com:3006/api/addbook");
      //根据接口文档的要求，设置一下content-type 写在请求头中
      //   Content-Type： application/x-www-form-urlencoded
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置请求头
      //   post请求体参数，要放到send方法中
      const data = `bookname=123&author=456&publisher=789&appkey=2983193a`;
      xhr.send(data);
      xhr.addEventListener("load", function () {
        console.log(this.response);
      });
</script>

参数为json格式

 <script>
      const xhr = new XMLHttpRequest();
      xhr.open("post", "http://www.itcbc.com:3006/api/addbook");
      //根据接口文档的要求，设置一下content-type 写在请求头中
      //   Content-Type： application/x-www-form-urlencoded
      xhr.setRequestHeader("Content-Type", "application/json"); //设置请求头
      //   post请求体参数，要放到send方法中
      const data = JSON.stringify({
        bookname: "json格式",
        author: "js",
        publisher: "sfsfa",
        appkey: "2983193a",
      });
      xhr.send(data);
      xhr.addEventListener("load", function () {
        console.log(this.response);
      });
</script>

参数为formdata格式--文件上传

<body>
    <input type="file" />
    <script>
      // 获取元素
      const input = document.querySelector("input");
      input.addEventListener("change", function () {
        // 获取要上传的文件
        const file = this.files[0];
        // 用formdata获取数据
        const fd = new FormData();
        // 将上传的文件包装起来
        fd.append("avatar", file);
        // console.log(typeof fd);
        // 用原生ajax将数据发送给后端
        // FormData 做文件上传，不需要设置Content-type
        const xhr = new XMLHttpRequest();
        xhr.open("post", "http://www.itcbc.com:3006/api/formdata");
        xhr.send(fd);
        xhr.addEventListener("load", function () {
          console.log(this.response);
        });
      });
    </script>
  </body>

Ajax封装

封装1--get请求

<script>
      // 传参用解构的方式
      function ajax({ url, method, success }) {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url); // 这里面传递两个参数，第一个是请求方式，第二个是请求地址
        xhr.send();
        xhr.addEventListener("load", function () {
          //   当数据响应成功后，调用函数，将数据打印
          success(JSON.parse(this.response)); // json转数据类型
        });
      }
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        success(result) {
          console.log(result);
        },
      });
    </script>

封装2--get请求传参

<script>
      // 传参用解构的方式,当参数灵活使用的时候，应进行判断是否拼接参数
      function ajax({ url, method, success, data }) {
        const xhr = new XMLHttpRequest();
        const query = data ? "?" + data : "";
        xhr.open(method, url + query); // 这里面传递两个参数，第一个是请求方式，第二个是请求地址
        xhr.send();
        xhr.addEventListener("load", function () {
          //   当数据响应成功后，调用函数，将数据打印
          success(JSON.parse(this.response)); // json转数据类型
        });
      }
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        data: "appkey=2983193a",
        success(result) {
          console.log(result);
        },
      });
 </script>

封装3--post请求--参数为字符串类型

<script>
      // 传参用解构的方式,当参数灵活使用的时候，应进行判断是否拼接参数
      function ajax({ url, method, success, data }) {
        const xhr = new XMLHttpRequest();
        // xhr.setRequestHeader("Content-Type", "application/json");
        if (method === "get") {
          const query = data ? "?" + data : "";
          xhr.open(method, url + query); // 这里面传递两个参数，第一个是请求方式，第二个是请求地址
          xhr.send();
        } else if (method === "post") {
          xhr.open(method, url);
          xhr.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
          );
          xhr.send(data);
        }
        xhr.addEventListener("load", function () {
          //   当数据响应成功后，调用函数，将数据打印
          success(JSON.parse(this.response)); // json转数据类型
        });
      }
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        data: "appkey=2983193a",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/addbook",
        method: "post",
        data: "appkey=2983193a&bookname=ajax封装&author=js&publisher=黑马",
        success(result) {
          console.log(result);
        },
      });
    </script>

封装4--post请求--json类型参数

<script>
      // 传参用解构的方式,当参数灵活使用的时候，应进行判断是否拼接参数
      function ajax({ url, method, success, data }) {
        const xhr = new XMLHttpRequest();
        // xhr.setRequestHeader("Content-Type", "application/json");
        if (method === "get") {
          const query = data ? "?" + data : "";
          xhr.open(method, url + query); // 这里面传递两个参数，第一个是请求方式，第二个是请求地址
          xhr.send();
        } else if (method === "post") {
          console.log(typeof data);
          xhr.open(method, url);
          if (typeof data === "string") {
            xhr.setRequestHeader(
              "Content-Type",
              "application/x-www-form-urlencoded"
            );
            xhr.send(data);
          } else if (typeof data == "object") {
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(data));
          }
        }
        xhr.addEventListener("load", function () {
          //   当数据响应成功后，调用函数，将数据打印
          success(JSON.parse(this.response)); // json转数据类型
        });
      }
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        data: "appkey=2983193a",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/addbook",
        method: "post",
        data: "appkey=2983193a&bookname=ajax封装&author=js&publisher=黑马",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/addbook",
        method: "post",
        data: {
          appkey: "2983193a",
          bookname: "ajax封装",
          author: "js",
          publisher: "黑马",
        },
        success(result) {
          console.log(result);
        },
      });
    </script>

封装5--post请求--formdata类型参数

<body>
    <input type="file" />
    <script>
      const input = document.querySelector("input");
      // 传参用解构的方式,当参数灵活使用的时候，应进行判断是否拼接参数
      function ajax({ url, method, success, data }) {
        const xhr = new XMLHttpRequest();
        // xhr.setRequestHeader("Content-Type", "application/json");
        if (method === "get") {
          const query = data ? "?" + data : "";
          xhr.open(method, url + query); // 这里面传递两个参数，第一个是请求方式，第二个是请求地址
          xhr.send();
        } else if (method === "post") {
          console.log(typeof data);
          xhr.open(method, url);
          if (typeof data === "string") {
            xhr.setRequestHeader(
              "Content-Type",
              "application/x-www-form-urlencoded"
            );
            xhr.send(data);
          } else if (typeof data === "object") {
            //对象和formdata检测类型都是object，要继续进行判断，当参数为formdata类型时，就直接将数据传给后端
            if (data instanceof FormData) {
              xhr.send(data);
            } else {
              xhr.setRequestHeader("Content-Type", "application/json");
              xhr.send(JSON.stringify(data));
            }
          }
        }
        xhr.addEventListener("load", function () {
          //   当数据响应成功后，调用函数，将数据打印
          success(JSON.parse(this.response)); // json转数据类型
        });
      }
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/getbooks",
        method: "get",
        data: "appkey=2983193a",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/addbook",
        method: "post",
        data: "appkey=2983193a&bookname=ajax封装&author=js&publisher=黑马",
        success(result) {
          console.log(result);
        },
      });
      ajax({
        url: "http://www.itcbc.com:3006/api/addbook",
        method: "post",
        data: {
          appkey: "2983193a",
          bookname: "ajax封装",
          author: "js",
          publisher: "黑马",
        },
        success(result) {
          console.log(result);
        },
      });
      input.addEventListener("change", function () {
        // 获取要上传的文件
        const file = this.files[0];
        // 用formdata获取数据
        const data = new FormData();
        // 将上传的文件包装起来
        data.append("avatar", file);
        // console.log(typeof fd);
        // 用原生ajax将数据发送给后端
        // FormData 做文件上传，不需要设置Content-type
        ajax({
          url: "http://www.itcbc.com:3006/api/formdata",
          method: "post",
          data: data,
          success(result) {
            console.log(result);
          },
        });
      });
    </script>
  </body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,634评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,951评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,427评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,770评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,835评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,799评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,768评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,544评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,979评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,121评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,756评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2赞 352

推荐阅读更多精彩内容

  • Ajax
    了解Ajax 什么是Ajax 一种由浏览器 发起 向 服务器 数据交互 的技术 全称是 Asynchronous ...
    kc7阅读 89评论 0赞 0
  • 2021-04-30Ajax第三天
    一、使用xhr发起GET请求 ①创建 xhr 实例对象 var 对象名 = new XMLHttpRequest(...
    大刀劈向鬼子阅读 155评论 0赞 0
  • ajax
    ajax第一天 1.接口 被请求的 URL 地址，就叫做接口或API 接口 每个接口必须有对应的请求方式 2.接口...
    这个名字很有品味阅读 185评论 0赞 0
  • 什么是Ajax（Ajax的来历、运行原理、优缺点及其它）
    大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师...
    大大头大阅读 7,647评论 1赞 72
  • AJAX
    AJAX 概述 背景 “JavaScript 对我们而已能力有限”，我们目前所了解到的 Web 所提供的 API ...
    这是这时阅读 2,043评论 0赞 2