基础网站建设的实施步骤,网站建设 发展历程,做购物网站赚钱吗,网站建设高等教育出版社笔记目录 2. Ajax 综合案例2.1 案例一-图书管理2.1.1 渲染列表2.1.2 新增图书2.1.3 删除图书2.1.4 编辑图书 2.2 案例二-背景图的上传和更换2.2.1 上传2.2.2 更换 2.3 案例三-个人信息设置2.3.1 信息渲染2.3.2 头像修改2.2.3 信息修改2.3.4 提示框 Ajax 笔记#xff1a;
Ajax… 笔记目录 2. Ajax 综合案例2.1 案例一-图书管理2.1.1 渲染列表2.1.2 新增图书2.1.3 删除图书2.1.4 编辑图书 2.2 案例二-背景图的上传和更换2.2.1 上传2.2.2 更换 2.3 案例三-个人信息设置2.3.1 信息渲染2.3.2 头像修改2.2.3 信息修改2.3.4 提示框 Ajax 笔记
Ajax 笔记一—— Ajax 入门
Ajax 笔记二—— Ajax 案例
Ajax 笔记三—— Ajax 原理
Ajax 笔记四—— Ajax 进阶 Ajax 笔记接口文档https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135 2. Ajax 综合案例
2.1 案例一-图书管理
2.1.1 渲染列表
获取数据的时候需要给自己起一个外号。由于都是上传到同一服务器为了区分不同同学的数据。
/*** 目标1渲染图书列表* 1.1 获取数据* 1.2 渲染数据*/
const creator 老张
// 封装-获取并渲染图书列表函数
function getBooksList() {// 1.1 获取数据axios({url: http://hmajax.itheima.net/api/books,params: {// 外号获取对应数据creator}}).then(result {// console.log(result)const bookList result.data.data// console.log(bookList)// 1.2 渲染数据const htmlStr bookList.map((item, index) {return trtd${index 1}/tdtd${item.bookname}/tdtd${item.author}/tdtd${item.publisher}/tdtd data-id${item.id}span classdel删除/spanspan classedit编辑/span/td/tr}).join()// console.log(htmlStr)document.querySelector(.list).innerHTML htmlStr})
}
// 网页加载运行获取并渲染列表一次
getBooksList()2.1.2 新增图书
/*** 目标2新增图书* 2.1 新增弹框-显示和隐藏* 2.2 收集表单数据并提交到服务器保存* 2.3 刷新图书列表*/
// 2.1 创建弹框对象
const addModalDom document.querySelector(.add-modal)
const addModal new bootstrap.Modal(addModalDom)
// 保存按钮-点击-隐藏弹框
document.querySelector(.add-btn).addEventListener(click, () {// 2.2 收集表单数据并提交到服务器保存const addForm document.querySelector(.add-form)const bookObj serialize(addForm, { hash: true, empty: true })// console.log(bookObj)// 提交到服务器axios({url: http://hmajax.itheima.net/api/books,method: POST,data: {...bookObj,creator}}).then(result {// console.log(result)// 2.3 添加成功后重新请求并渲染图书列表getBooksList()// 重置表单addForm.reset()// 隐藏弹框addModal.hide()})
})2.1.3 删除图书
/*** 目标3删除图书* 3.1 删除元素绑定点击事件-获取图书id* 3.2 调用删除接口* 3.3 刷新图书列表*/
// 3.1 删除元素-点击事件委托
document.querySelector(.list).addEventListener(click, e {// 获取触发事件目标元素// console.log(e.target)// 判断点击的是删除元素if (e.target.classList.contains(del)) {// console.log(点击删除元素)// 获取图书id自定义属性idconst theId e.target.parentNode.dataset.id// console.log(theId)// 3.2 调用删除接口axios({url: http://hmajax.itheima.net/api/books/${theId},method: DELETE}).then(() {// 3.3 刷新图书列表getBooksList()})}
})2.1.4 编辑图书
/*** 目标4编辑图书* 4.1 编辑弹框-显示和隐藏* 4.2 获取当前编辑图书数据-回显到编辑表单中* 4.3 提交保存修改并刷新列表*/
// 4.1 编辑弹框-显示和隐藏
const editDom document.querySelector(.edit-modal)
const editModal new bootstrap.Modal(editDom)
// 编辑和删除都是动态创建的元素需要将事件委托给.list
// 编辑元素-点击-弹框显示
document.querySelector(.list).addEventListener(click, e {// 判断点击的是否为编辑元素if (e.target.classList.contains(edit)) {// 4.2 获取当前编辑图书数据-回显到编辑表单中const theId e.target.parentNode.dataset.idaxios({url: http://hmajax.itheima.net/api/books/${theId}}).then(result {const bookObj result.data.data// document.querySelector(.edit-form .bookname).value bookObj.bookname// document.querySelector(.edit-form .author).value bookObj.author// 数据对象“属性”和标签“类名”一致// 遍历数据对象使用属性去获取对应的标签快速赋值const keys Object.keys(bookObj) // [id, bookname, author, publisher]keys.forEach(key {document.querySelector(.edit-form .${key}).value bookObj[key]})})editModal.show()}
})
// 修改按钮-点击-隐藏弹框
document.querySelector(.edit-btn).addEventListener(click, () {// 4.3 提交保存修改并刷新列表const editForm document.querySelector(.edit-form)const { id, bookname, author, publisher } serialize(editForm, { hash: true, empty: true})// 保存正在编辑的图书id隐藏起来无需让用户修改// input typehidden classid nameid value84783axios({url: http://hmajax.itheima.net/api/books/${id},method: PUT,data: {bookname,author,publisher,creator}}).then(() {// 修改成功以后重新获取并刷新列表getBooksList()// 隐藏弹框editModal.hide()})
})2.2 案例二-背景图的上传和更换
2.2.1 上传
先选择的本地文件接着提交到服务器保存服务器会返回图片的 url 网址然后把网址加载到 img 标签的 src 属性中即可显示。避免了浏览器保存是临时性的问题。 图片是文件而不是以前的数字和字符串。所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title图片上传/title
/headbody!-- 文件选择元素 --input typefile classuploadimg src alt classmy-imgscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 目标图片上传显示到网页上* 1. 获取图片文件* 2. 使用 FormData 携带图片文件* 3. 提交到服务器获取图片url网址使用*/// 文件选择元素-change改变事件document.querySelector(.upload).addEventListener(change, e {// 1. 获取图片文件console.log(e.target.files[0])// 2. 使用 FormData 携带图片文件const fd new FormData()fd.append(img, e.target.files[0])// 3. 提交到服务器获取图片url网址使用axios({url: http://hmajax.itheima.net/api/uploadimg,method: POST,data: fd}).then(result {console.log(result)// 取出图片url网址用img标签加载显示const imgUrl result.data.data.urldocument.querySelector(.my-img).src imgUrl})})/script
/body/html2.2.2 更换
/*** 目标网站-更换背景* 1. 选择图片上传设置body背景* 2. 上传成功时保存图片url网址* 3. 网页运行后获取url网址使用* */
document.querySelector(.bg-ipt).addEventListener(change, e {// 1. 选择图片上传设置body背景console.log(e.target.files[0])const fd new FormData()fd.append(img, e.target.files[0])axios({url: http://hmajax.itheima.net/api/uploadimg,method: POST,data: fd}).then(result {const imgUrl result.data.data.urldocument.body.style.backgroundImage url(${imgUrl})// 2. 上传成功时保存图片url网址localStorage.setItem(bgImg, imgUrl)})
})// 3. 网页运行后获取url网址使用
const bgUrl localStorage.getItem(bgImg)
console.log(bgUrl)
bgUrl (document.body.style.backgroundImage url(${bgUrl}))2.3 案例三-个人信息设置
2.3.1 信息渲染
/*** 目标1信息渲染* 1.1 获取用户的数据* 1.2 回显数据到标签上* */
const creator 播仔
// 1.1 获取用户的数据
axios({url: http://hmajax.itheima.net/api/settings,params: {creator}
}).then(result {const userObj result.data.data// 1.2 回显数据到标签上Object.keys(userObj).forEach(key {if (key avatar) {// 赋予默认头像document.querySelector(.prew).src userObj[key]} else if (key gender) {// 赋予默认性别// 获取性别单选框[男radio元素女radio元素]const gRadioList document.querySelectorAll(.gender)// 获取性别数字0男1女const gNum userObj[key]// 通过性别数字作为下标碰巧对应性别单选框元素的下标设置选中状态gRadioList[gNum].checked true} else {// 赋予默认内容document.querySelector(.${key}).value userObj[key]}})
})2.3.2 头像修改
/*** 目标2修改头像* 2.1 获取头像文件* 2.2 提交服务器并更新头像* */
// 文件选择元素-change事件
document.querySelector(.upload).addEventListener(change, e {// 2.1 获取头像文件console.log(e.target.files[0])const fd new FormData()fd.append(avatar, e.target.files[0])fd.append(creator, creator)// 2.2 提交服务器并更新头像axios({url: http://hmajax.itheima.net/api/avatar,method: PUT,data: fd}).then(result {const imgUrl result.data.data.avatar// 把新的头像回显到页面上document.querySelector(.prew).src imgUrl})
})2.2.3 信息修改
/*** 目标3提交表单* 3.1 收集表单信息* 3.2 提交到服务器保存*/
// 保存修改-点击
document.querySelector(.submit).addEventListener(click, () {// 3.1 收集表单信息const userForm document.querySelector(.user-form)const userObj serialize(userForm, { hash: true, empty: true })userObj.creator creator// 性别数字字符串转成数字类型userObj.gender userObj.genderconsole.log(userObj)// 3.2 提交到服务器保存axios({url: http://hmajax.itheima.net/api/settings,method: PUT,data: userObj}).then(result {})
})2.3.4 提示框
前置知识bootstrap 的 toast 提示框 先准备对应的标签结构模板里已有 设置延迟自动消失的时间
div classtoast data-bs-delay1500提示框内容
/div使用 JS 的方式在 axios 请求响应成功时展示结果 // 创建提示框对象const toastDom document.querySelector(css选择器)const toast new bootstrap.Toast(toastDom)// 显示提示框toast.show()提示框代码
/*** 目标3提交表单* 3.1 收集表单信息* 3.2 提交到服务器保存*/
/*** 目标4结果提示* 4.1 创建toast对象* 4.2 调用show方法-显示提示框*/
// 保存修改-点击
document.querySelector(.submit).addEventListener(click, () {// 3.1 收集表单信息const userForm document.querySelector(.user-form)const userObj serialize(userForm, { hash: true, empty: true })userObj.creator creator// 性别数字字符串转成数字类型userObj.gender userObj.genderconsole.log(userObj)// 3.2 提交到服务器保存axios({url: http://hmajax.itheima.net/api/settings,method: PUT,data: userObj}).then(result {// 4.1 创建toast对象const toastDom document.querySelector(.my-toast)const toast new bootstrap.Toast(toastDom)// 4.2 调用show方法-显示提示框toast.show()})
})
