devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AJAX ---- 2 Bootstrap 弹框_bootstrap弹框页面

作者：不正经 | 2024-02-14 18:08:26

赞

踩

bootstrap弹框页面

案例 - 图书管理

功能：不离开当前页面，显示单独内容，供用户操作

步骤：

1. 引入 bootstrap.css 和 bootstrap.js

2. 准备弹框标签，确认结构

3. 通过自定义属性，控制弹框的显示和隐藏

1. 通过属性控制，弹框显示或隐藏

  1. <!-- 
  2.     目标：使用Bootstrap弹框
  3.     1. 引入bootstrap.css 和 bootstrap.js
  4.     2. 准备弹框标签，确认结构
  5.     3. 通过自定义属性，控制弹框的显示和隐藏
  6.    -->
  7.    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
  8.     显示弹框
  9.    </button>
  10.  
  11.    <!-- 
  12.     弹框标签
  13.     bootstrap的modal弹框：添加modal类名（默认隐藏）
  14.    -->
  15.    <div class="modal my-box" tabindex="-1">
  16.     <div class="modal-dialog">
  17.       <div class="modal-content">
  18.         <!-- 头部 -->
  19.         <div class="modal-header">
  20.           <h5 class="modal-title">Modal title</h5>
  21.           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  22.         </div>
  23.         <!-- 身体 -->
  24.         <div class="modal-body">
  25.           <p>Modal body text goes here.</p>
  26.         </div>
  27.         <!-- 底部 -->
  28.         <div class="modal-footer">
  29.           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  30.           <button type="button" class="btn btn-primary">Save changes</button>
  31.         </div>
  32.       </div>
  33.     </div>
  34.   </div>
  35.  
  36.    <!-- 引入bootstrap.js -->
  37.    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.js"></script>

2. 通过 JS 控制，弹框显示或隐藏

  1. <script>
  2.     // 1.创建弹框对象
  3.     const modalDom = document.querySelector('.name-box')
  4.     const modal = new bootstrap.Modal(modalDom)
  5.  
  6.     // 编辑姓名->点击->显示弹框
  7.     document.querySelector('.edit-btn').addEventListener('click', () => {
  8.       document.querySelector('.username').value = '默认姓名'
  9.       // 2. 显示弹框
  10.       modal.show()
  11.     })
  12.  
  13.     // 保存->点击->获取姓名打印->弹框隐藏
  14.     document.querySelector('.save-btn').addEventListener('click', () => {
  15.       const username = document.querySelector('.username').value
  16.       console.log('mm', username)
  17.       // 2. 隐藏弹框
  18.       modal.hide()
  19.     })
  20.  
  21.   </script>

步骤：

1. 渲染列表（查）

  1. /**
  2.  * 目标1：渲染图书列表
  3.  *  1.1 获取数据
  4.  *  1.2 渲染数据
  5.  */
  6. const creator = '老吴'
  7. // 封装获取并渲染图书列表函数
  8. function getBooksList() {
  9.   // 1.1 获取数据
  10.   axios({
  11.     url: 'http://hmajax.itheima.net/api/books',
  12.     params: {
  13.       creator
  14.     }
  15.   }).then(result => {
  16.     console.log(result)
  17.     const bookList = result.data.data
  18.     console.log(bookList)
  19.     // 1.2 渲染数据
  20.     const htmlStr = bookList.map((item, index) => {
  21.       // 再删除编辑上添加自定义属性
  22.       return `
  23.       <tr>
  24.       <td>${ index + 1 }</td>
  25.       <td>${ item.bookname }</td>
  26.       <td>${ item.author }</td>
  27.       <td>${ item.publisher }</td>
  28.       <td data-id=${item.id}>
  29.         <span class="del">删除</span>
  30.         <span class="edit">编辑</span>
  31.       </td>
  32.     </tr>
  33.       `
  34.     }).join('')
  35.     // console.log(htmlStr)
  36.     document.querySelector('.list').innerHTML = htmlStr
  37.   })
  38. }
  39. // 网页加载运行，获取并渲染列表一次
  40. getBooksList()/**
  41.  * 目标1：渲染图书列表
  42.  *  1.1 获取数据
  43.  *  1.2 渲染数据
  44.  */
  45. const creator = '老吴'
  46. // 封装获取并渲染图书列表函数
  47. function getBooksList() {
  48.   // 1.1 获取数据
  49.   axios({
  50.     url: 'http://hmajax.itheima.net/api/books',
  51.     params: {
  52.       creator
  53.     }
  54.   }).then(result => {
  55.     console.log(result)
  56.     const bookList = result.data.data
  57.     console.log(bookList)
  58.     // 1.2 渲染数据
  59.     const htmlStr = bookList.map((item, index) => {
  60.       // 再删除编辑上添加自定义属性
  61.       return `
  62.       <tr>
  63.       <td>${ index + 1 }</td>
  64.       <td>${ item.bookname }</td>
  65.       <td>${ item.author }</td>
  66.       <td>${ item.publisher }</td>
  67.       <td data-id=${item.id}>
  68.         <span class="del">删除</span>
  69.         <span class="edit">编辑</span>
  70.       </td>
  71.     </tr>
  72.       `
  73.     }).join('')
  74.     // console.log(htmlStr)
  75.     document.querySelector('.list').innerHTML = htmlStr
  76.   })
  77. }
  78. // 网页加载运行，获取并渲染列表一次
  79. getBooksList()

2. 新增图书（增）

  1. /**
  2.  * 目标2：新增图书
  3.  *  2.1 新增弹框->显示和隐藏
  4.  *  2.2 收集表单数据，并提交到服务器保存
  5.  *  2.3 刷新图书列表
  6.  */
  7. // 2.1 创建弹框对象
  8. const addModalDom = document.querySelector('.add-modal')
  9. const addModal = new bootstrap.Modal(addModalDom)
  10.  
  11. // 保存->点击->隐藏弹框
  12. document.querySelector('.add-btn').addEventListener('click', () => {
  13.   // 2.2收集表单数据，不提交到服务器保存
  14.   const addFrom = document.querySelector('.add-form')
  15.   const bookObj = serialize(addFrom, { hash: true, empty: true })
  16.   console.log(bookObj)
  17.   // 提交到服务器
  18.   axios({
  19.     url: 'http://hmajax.itheima.net/api/books',
  20.     method: 'POST',
  21.     data: {
  22.       ...bookObj,
  23.       creator
  24.     }
  25.   }).then(result => {
  26.     console.log(result)
  27.     // 2.3 添加成功后，重新请求并渲染图书列表
  28.     getBooksList()
  29.     // 重置表单
  30.     addFrom.reset()
  31.     // 隐藏弹框
  32.     addModal.hide()
  33.   })
  34.  
  35.   addModal.hide()
  36. })

3. 删除图书（删）

  1. /**
  2.  * 目标3：删除图书
  3.  *  3.1 删除元素绑定点击事件->获取图书id
  4.  *  3.2 调用删除接口
  5.  *  3.3 刷新图书列表
  6.  */
  7. // 3.1 删除元素->点击（事件委托）
  8. document.querySelector('.list').addEventListener('click', e => {
  9.   // 获取触发事件目标元素
  10.   // console.log(e.target)
  11.   // 判断点击的是删除元素
  12.   if(e.target.classList.contains('del')) {
  13.     // console.log('点击了')
  14.     // 获取图书id（自定义属性）
  15.     const theId = e.target.parentNode.dataset.id
  16.     console.log(theId)
  17.     // 3.2调用删除接口
  18.     axios({
  19.       url: `http://hmajax.itheima.net/api/books/${theId}`,
  20.       method: 'DELETE'
  21.     }).then(() => {
  22.       // 3.3 刷新图书列表
  23.       getBooksList()
  24.     })
  25.   }
  26. })

4. 编辑图书（改）

  1. /**
  2.  * 目标4：编辑图书
  3.  *  4.1 编辑弹框->显示和隐藏
  4.  *  4.2 获取当前编辑图书数据->回显到编辑表单中
  5.  *  4.3 提交保存修改，并刷新列表
  6.  */
  7. // 4.1 编辑弹框->显示和隐藏
  8. const editDom = document.querySelector('.edit-modal')
  9. const editModal = new bootstrap.Modal(editDom)
  10. // 编辑元素->点击->弹框显示
  11. document.querySelector('.list').addEventListener('click', e => {
  12.   // 判断点击的是否为编辑元素
  13.   if(e.target.classList.contains('edit')) {
  14.     // console.log('编辑')
  15.     // 4.2 获取当前图书数据->回显到编辑表单上
  16.     const theId = e.target.parentNode.dataset.id
  17.     axios({
  18.       url: `http://hmajax.itheima.net/api/books/${theId}`
  19.     }).then(result => {
  20.       // console.log(result)
  21.       const bookObj = result.data.data
  22.       // document.querySelector('.edit-form .bookname').value = bookObj.bookname
  23.       // document.querySelector('.edit-form .author').value = bookObj.author
  24.       // document.querySelector('.edit-form .publisher').value = bookObj.publisher
  25.       // 数据对象"属性"和标签"类名"一致
  26.       // 遍历数据对象,使用属性去获取对应的标签,快速赋值
  27.       const keys = Object.keys(bookObj) //  ['id', 'bookname', 'author', 'publisher']
  28.       // console.log(keys)
  29.       keys.forEach(key => {
  30.         document.querySelector(`.edit-form .${key}`).value = bookObj[key]
  31.       })
  32.     })
  33.     editModal.show()
  34.   }
  35. })
  36. // 修改按钮->点击->隐藏弹框
  37. document.querySelector('.edit-btn').addEventListener('click', () => {
  38.   // 4.3 提交保存修改，并刷新列表
  39.   const editForm = document.querySelector('.edit-form')
  40.   // 对象解构
  41.   const { id, bookname, author, publisher} = serialize(editForm, { hash: true, empty: true })
  42.   // console.log(bookObj)
  43.   // 保存正在编辑的图书id，隐藏起来，无需让用户修改
  44.   // <input type="hidden" class="id" name="id" value="238377">
  45.   axios({
  46.     url: `http://hmajax.itheima.net/api/books/${id}`,
  47.     method: 'PUT',
  48.     data: {
  49.       bookname,
  50.       author,
  51.       publisher,
  52.       creator
  53.     }
  54.   }).then(() => {
  55.     // 修改成功以后，重新获取并刷新列表
  56.     getBooksList()
  57.  
  58.     // 隐藏弹框
  59.     editModal.hide()
  60.   })
  61.   editModal.hide()
  62. })

图片上传

1. 获取图片文件对象

2. 使用 FormData 携带图片文件

3. 提交表单数据到服务器，使用图片 url 网址

  1. <script>
  2.     /**
  3.      * 目标：图片上传，显示到网页上
  4.      *  1. 获取图片文件
  5.      *  2. 使用 FormData 携带图片文件
  6.      *  3. 提交到服务器，获取图片url网址使用
  7.     */
  8.     // 文件选择元素->change改变事件
  9.     document.querySelector('.upload').addEventListener('change', e => {
  10.       console.log(e.target.files[0])
  11.       // 2. 使用 FormData 携带图片文件
  12.       const fd = new FormData()
  13.       fd.append('img', e.target.files[0])
  14.       // 3. 提交到服务器，获取图片url网址使用
  15.       axios({
  16.         url: 'http://hmajax.itheima.net/api/uploadimg',
  17.         method: 'POST',
  18.         data: fd
  19.       }).then(result => {
  20.         console.log(result)
  21.         // 去除图片url网址，用img标签加载显示
  22.         const imgUrl = result.data.data.url
  23.         document.querySelector('.my-img').src = imgUrl
  24.       })
  25.     })
  26.   </script>

案例 - 网站换肤

1. 选择图片上传，设置body背景

2. 上传成功时，保存url网址

3. 网页运行后，获取url网址使用

  1. /**
  2.  * 目标：网站-更换背景
  3.  *  1. 选择图片上传，设置body背景
  4.  *  2. 上传成功时，"保存"图片url网址
  5.  *  3. 网页运行后，"获取"url网址使用
  6.  * */
  7. document.querySelector('.bg-ipt').addEventListener('change', e => {
  8.   console.log(e.target.files[0])
  9.   const fd = new FormData()
  10.   fd.append('img', e.target.files[0])
  11.   axios({
  12.     url: 'http://hmajax.itheima.net/api/uploadimg',
  13.     method: 'POST',
  14.     data: fd
  15.   }).then(result => {
  16.     console.log(result)
  17.     const imgUrl = result.data.data.url
  18.     document.body.style.backgroundImage = `url(${imgUrl})`
  19.  
  20.     // 2. 上传成功时，"保存"图片url网址
  21.     localStorage.setItem('bgImg', imgUrl)
  22.  
  23.   })
  24. })
  25. // 3. 网页运行后，"获取"url网址使用
  26. const bgUrl = localStorage.getItem('bgImg')
  27. console.log(bgUrl)
  28. // 本地有背景图地址才设置
  29. bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)

案例 - 个人信息设置

步骤：

1. 信息渲染

  1. /**
  2.  * 目标1：信息渲染
  3.  *  1.1 获取用户的数据
  4.  *  1.2 回显数据到标签上
  5.  * */
  6. const creator = '播仔'
  7. // 1.1 获取用户的数据
  8. axios({
  9.   url: 'http://hmajax.itheima.net/api/settings',
  10.   params: {
  11.     creator
  12.   }
  13. }).then(result => {
  14.   console.log(result)
  15.   const userObj = result.data.data
  16.   console.log(userObj)
  17.   // 1.2 回显数据到标签上
  18.   Object.keys(userObj).forEach(key => {
  19.     if(key === 'avatar') {
  20.       // 赋予默认头像
  21.       document.querySelector('.prew').src = userObj[key]
  22.     }else if(key === 'gender') {
  23.       // 赋予默认性别
  24.       // 获取性别单选框：[男radio元素, 女radio元素]
  25.       const gRadioList = document.querySelectorAll('.gender')
  26.       const getNum = userObj[key]
  27.       // console.log(getNum)
  28.       // 通过性别数字，作为下标，找到对应性别单选框，设置选中状态
  29.       gRadioList[getNum].checked = true
  30.     }else {
  31.       document.querySelector(`.${key}`).value = userObj[key]
  32.     }
  33.   })
  34. })

2. 头像修改

  1. /**
  2.  * 目标2：修改头像
  3.  *  2.1 获取头像文件
  4.  *  2.2 提交服务器并更新头像
  5.  * */
  6. // 文件选择元素->change事件
  7. document.querySelector('.upload').addEventListener('change', e => {
  8.   // 2.1 获取头像文件
  9.   console.log(e.target.files[0])
  10.   const fd = new FormData()
  11.   fd.append('avatar', e.target.files[0])
  12.   fd.append('creator', creator)
  13.   // 2.2 提交服务器并更新头像
  14.   axios({
  15.     url: 'http://hmajax.itheima.net/api/avatar',
  16.     method: 'PUT',
  17.     data: fd
  18.   }).then(result => {
  19.     // console.log(result)
  20.     const imgUrl = result.data.data.avatar
  21.     // 把新的头像回显到页面
  22.     document.querySelector('.prew').src = imgUrl
  23.   })
  24. })

3. 提交表单

4. 结果提示

  1. // 保存修改->点击
  2. /**
  3.  * 目标4：结果提示
  4.  *  4.1 创建toast对象
  5.  *  4.2 调用show方法->显示提示框
  6.  */
  7. document.querySelector('.submit').addEventListener('click', () => {
  8.   // 3.1 收集表单信息
  9.   const userForm = document.querySelector('.user-form')
  10.   const userObj = serialize(userForm, { hash: true, empty: true })
  11.   userObj.creator = creator
  12.   // 性别数字字符串，转换成数字类型
  13.   userObj.gender = +userObj.gender
  14.   console.log(userObj)
  15.   // 3.2 提交到服务器保存
  16.   axios({
  17.     url: 'http://hmajax.itheima.net/api/settings',
  18.     method: 'PUT',
  19.     data: userObj
  20.   }).then(result =>{
  21.     // 4.1 创建toast对象
  22.     const toastDom = document.querySelector('.my-toast')
  23.     const toast = new bootstrap.Toast(toastDom)
  24.  
  25.     // 4.2 调用show方法->显示提示框
  26.     toast.show()
  27.   })
  28. })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/80958
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号