“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情”

⭐️Ajax加强

axios

是前端圈最火、专注于请求数据的库

axios 发送 get 请求携带参数

⭐️直接在 URL 上拼接 即可

 // ?  前面部分是正常的url
  // ? 后面的参数部分   a=1&b=2

在 ⭐️params 对象中携带本质也是帮我们将对象转成了字符串，然后拼接在 url 上

 axios({
 url: 'http://www.itcbc.com:3006/api/getbooks',
 method: 'GET',
 params: {
   bookname: '斗破苍穹134',
   author: '土豆',
 },
 }).then((result) => {
 console.log(result);
 });

增加一列删除
- 给删除按钮绑定事件（异步没有办法获取到 dom 元素）
  - 解决：事件委托
  - 找一个删除按钮的父元素（一直存在网页中不是动态生成）
  - 用ID删除，在删除生成是给他加一个 data-id
  - 用 axios 的.then 里面的回调函数更新渲染页面
确认框
- if(confrim('您...'))

axios 发送 post 请求携带参数

⭐️data:{obj}

 axios({
     url: 'http://www.itcbc.com:3006/api/addbook',
     method: 'POST',
     data: {
     bookname: 'yeah',
     author: 'wendy',
     publisher: 'meizi',
     appkey: 'sdfr34343',
     }
     }).then(result => {
     console.log(result);
 })

⭐️data:bookname=21&author=211&publisher=111

 axios({
     url: 'http://www.itcbc.com:3006/api/addbook',
     method: 'POST',
     data: a=2&b=1
     }).then(result => {
     console.log(result);
 })

和服务器通信 ajax

get

获取信息

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

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

post

发送信息给服务器

 axios({
     url: 'http://www.itcbc.com:3006/api/addbook',
     method: 'POST',
     data: {
     bookname: 'yeah',
     author: 'wendy',
     publisher: 'meizi',
     appkey: 'sdfr34343',
     }
     }).then(result => {
     console.log(result);
 })

简写 axios.post('url',参数对象)

 axios.post('http://www.itcbc.com:3006/api/addbook',{
     bookname: '演示ttt',
     author: '我自己你不知道ttt',
     publisher: '斑马出版社ttt',
     // 改为只有自己知道的key 长度 6-20
     appkey: 'bbccddaaa',
 }).then((result)=>{
     console.log(result)
 })

post-data-字符串格式数据

 1.data:{obj}
 // data:{
 //     bookname:'b1',
 // }
 2. data:字符串格式数据
 data: 'bookname=b1&author=wendy&publisher=meizi&appkey=bbccddaaa',

delete
- 删除数据

put

修改数据

   axios({
       url: 'http://www.itcbc.com:3006/api/delbook',
       method: 'DELETE',
       params: {
       appkey: 'bbccddaaa',
       id,
       }
       }).then(result => {
       render();
   })

patch

请求方式携带参数写在 data 还是 params

看文档
- Query 参数 url 上或者 params 上
- body 参数 data
默认
- 1 get 请求 url 或者 params
- 2 post 请求 data
- 3 delete 、put、patch 结合文段来看
  - delete 和 get 相似
  - put patch post 类似
试试

form 表单和按钮

默认刷新
设置不刷新
- e.preventDefault()

获取数据

$('form').serialize()

 form.addEventListener('submit', function (e) {
     e.preventDefault()
     const query = $('form').serialize();
     console.log(query);
 });

原生js获取

 const form = document.querySelector('form')
 form.addEventListener('submit', function (e) {
     e.preventDefault()
     const fd = new FormData(this) // this = form dom 
     const usp = new URLSearchParams(fd)
     const query = usp.toString()
     console.log(query);
 })

表单重置
- $('form').reset()
取消自动填充
- <form autocomplete="off">
表单隐藏域
- <input type="hidden">
点击，表单重置
- <button type="reset" class="btn btn-primary">取消</button>

得到用户想要编辑的一行数据

 for (const key in editOldData[0]) {
     document.querySelector(`input[name=${key}]`).value = editOldData[0][key]
 }

⭐️FormData对象

构造对象可以 new 一个实例，可以存放一些数据的实例（不像普通的 obj），调用方法 append（key，value）添加数据

作用：

1 文件上传

 // 1 写一个 input 标签 type = file
 <input type="file">
 <img src="" alt="">
 <script src="./lib/axios.js"></script>
 <script src="./js/common.js"></script>
 <script>
     const ipt = document.querySelector('input')
 
     // 2 给 input 标签绑定 change 事件
     ipt.addEventListener('change', () => {
 
     // 3 通过 input.files 来获取到上传的文件数组
         const files = ipt.files
 
     // 4 可选，直接把文件显示在前端页面
         console.log(files[0]); // obj
         const fd = new FormData()
 
     // 5 使用 formdata 对象来包装（添加） 选好的 文件
         fd.append('avatar', files[0])
 
     // 6 使用 axios 携带参数 formdata 对象 来完成文件的上传
         axios({
             method: 'POST',
             url: '/api/formdata',
             data: fd
         }).then(res => document.querySelector('img').src = res.data.data.filename)
 
     })
 
     // 4 可选，直接把文件显示在前端页面 不经过后端
     const src = URL.createObjectURL(file)
     document.querySelector('img').src = src
     
 </script>

2 配合URLSearchParams 对象获取存 formdata 中的表单数据

 const form = document.querySelector('form')
 form.addEventListener('submit', (e) => {
     e.preventDefault()
     const fd = new FormData(form)
     const usp = new URLSearchParams(fd)
     console.log(usp);
 })

不能直接打印 FormData 看数据

通过 foreach 方法来遍历挨个查看数据

 const fd = new FormData()
 fd.append('username', 'wendy')
 for (let i = 0; i < 10; i++) {
     fd.append('username', `wendy${i}`)
 }
 fd.forEach((value, key, all) => {
     console.log("你要查看的属性名是", key, "属性值是", value, 'all:', all);
 })

URLSearchParams 对象

构造函数，存 formdata 中的表单数据
该对象有 tostring 方法，可以专门把数据转成字符串参数形式

axios 基地址

提高程序的可维护性

 axios.defaults.baseURL  = 'http://www.itcbc.com:3006';
 
 axios.get('/api/getbooks',{
     params:{appkey:'bbccddaaa'},
 }).then((result)=>{
     console.log(result);
 })

拦截器

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

好处：

可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

URL.createObjectURL

URL.createObjectURL(你想要获取谁的内存地址) 返回内存中的文件地址

API

应用程序接口服务对外提供的能力
- ajax
  - 提供数据的 API
- webAPI
  - 浏览器针对 js语法提供的一套服务
    - js 语法 for 数组对象、 ++ --
  - ```
   let  num =10; //  js语法能力
   document.querySelector("div").innertHTML = num ;
```
- formData
  - 操作网页标签能力
  - 快速获取 form 标签中数据的能力，浏览器的设置让你 formDate 去读数据

ajax原生请求

get
- 1 创建 xhr 实例
- 2 调用 open 方法（指定请求类型，指定请求的 url）
  - url 为字符串数据型
- 3 开始发起请求
- 4 监听数据响应
post
- post 请求传递的参数
  - 1 只能放在 send 中
  - 2 传递的参数的格式 3种格式
    - 2.1 字符串形式
      - a=1&b=2&c=3 告诉后端（请求头）我传递的数据是格式1
      - send 直接发送 usp 数据
        
        请求头： xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    - 2.2 json 形式
      - { a:1,b:2} 告诉后端（请求头）我传递的数据是格式2
      - xhr.setRequestHeader('content-type', 'application/json')
        
        xhr.send(JSON.stringify(data))
    - 2.3 FormData格式
      - 告诉后端（请求头）我传递的数据是格式3

Ajax加强（axios知识总结、form 表单和按钮）

⭐️Ajax加强

axios

axios 发送 get 请求 携带参数

axios 发送 post 请求 携带参数

form 表单和按钮

axios 发送 get 请求携带参数

axios 发送 post 请求携带参数