数据 动态渲染
页面一打开就需要渲染数据
查阅接口文档
02-英雄信息管理 - 1获取所有英雄-Ajax课程
发起ajax请求，获取数据
遍历返回的数组，拼接生成动态结构
填充到指定位置
数据的搜索
- 搜索的本质就是查询 如果没有传递参数就是查询所有数据 如果有参数，就是搜索
- 将之前的数据的渲染操作封装为一个函数，搜索关键字做为函数的参数
数据的添加 - 模态框
模态框的添加
做为Body的直接子元素
模态框的弹出
为控制按钮添加属性
data-toggle='modal'
data-target='模态框的id'
为模态框设置id
模态框制作
- 实现数据的添加
查阅接口文档
发起ajax请求
添加成功之后进行页面列表数据的刷新
再次调用数据的渲染方法
说明：现在还没有处理用户头像
数据的删除 查阅接口文档
- 事件的绑定
动态生成的元素的 事件 绑定需要使用事件委托
- 数据的删除
渲染结构的时候将用户id存储到当前删除按钮中
id的获取
发起ajax请求
页面列表数据的刷新
数据的编辑
- 文件上传
查阅接口文件，传递的文件数据是二进制数据
使用formdata收集用户头像数据
获取文件数据： dom.files[0]
创建FormData对象
使用append方法将文件数据对象追加到formdata中
ajax的参数支持直接传递formdata
- 用户头像编辑
文件上传成功之后，我们还需要再次发起ajax实现用户数据的编辑更新
查阅接口文档，需要传入：id ,img
后台编辑操作需要根据id进行，以便找到唯一的数据进行编辑
如果不传入条件，则会编辑所有数据
img
来自于文件上传成功之后的后台返回数据：res.src
id
生成动态结构的时候将id存储到“上传头像”按钮中
单击“上传头像”按钮弹出模态框的时候，将id转存到全局变量中
在文件上传成功之后，发起更新用户信息的ajax请求，在请求中使用全局的id做为参数传递
data: { id: heroId, img: res.src }
