回顾

1. axios的config模式:

   axios({
       url:"",// 请求地址
       method:"",// 请求的方法
       data:{},// 请求的数据(请求体中)
       params:{} // 请求的数据(get,URL中) url?key=value&key2=value2
   })
   

2. form表单数据提交

   1. 默认form提交的缺点? 刷新页面
   2. ajax提交form表单需要阻止的默认行为?
      1. form的submit
      2. button的click
      3. 任意选一个
      4. e.preventDefault()
   3. 可以通过form-serialize插件简化什么?
      1. 表单数据取值
      2. FormData:可以上传文件
      3. form-serialize只是获取数据–>不包含文件,用户输入的内容

3. ajax文件上传

   1. 用到了哪个对象?
      1. FormData
   2. 如何添加数据?
      1. append(key,value)
         1. e.target.files[0]
         2. dom.files[0]
   3. 如何获取input type=file选中的文件?

4. 图书管理

   1. 列表渲染
   2. 新增
      1. bootstrap–Modal
      2. const modal= new bootstrap.Modal(弹框的dom元素)
      3. modal.show() 显示
      4. modal.hide() 隐藏
   3. 删除
      1. 点击不同行,删除的元素是不同的
      2. 每一行都需要绑定点击事件,保存id
         1. data-id保存,dom元素上,html结构中
         2. dataset.id获取,JavaScript中写的
         3. 事件绑定–>事件委托
   4. 保存修改
      1. 每一行都需要绑定点击事件,保存id
         1. data-id保存,dom元素上,html结构中
         2. dataset.id获取,JavaScript中写的
         3. 事件绑定–>事件委托
      2. 进入修改状态
         1. 根据id获取数据
      3. 保存修改
         1. 传,把最新的数据提交给服务器

目标:

1. 原生ajax
2. Promise
3. Promise+原生ajax抽取axios
4. Promise的静态方法

原生Ajax

原生ajax-基本使用

axios是基于原生ajax封装的,简单易用,但是为了更好的理解他内部做的事情,咱们来认识一下原生的写法

传送门:mdn-ajax

使用步骤:

1. 代码不用背,理解意思即可
2. 实例化 XMLHttpRequest 异步对象(内置)
3. 设置请求 地址 和 方法