AJAX 2——Bootstrap弹框使用、图书管理案例、图片上传方法

AJAX 2------Bootstrap弹框使用、图书管理案例、图片上传方法

1.Bootstrap弹框使用-Modal

  • 通过自定义属性控制

    js 复制代码
    <button  data-bs-toggle="modal" data-bs-target="CSS选择器">点击该按钮显示弹框</button>
     <button data-bs-dismiss="modal" >Close关闭弹框</button>
  • 通过JS控制

    js 复制代码
     //  1. 创建弹框对象
      // 2. 调用弹框对象内置方法
      //   .show() 显示
      //   .hide() 隐藏
      const modalDom = document.querySelector('.name-box')
      const modal = new bootstrap.Modal(modalDom)
      document.querySelector('.edit-btn').addEventListener
          ('click', () => {
            document.querySelector('.username').value = '小小怪'
            modal.show()
        })
     document.querySelector('.save-btn').addEventListener
          ('click', () => {
            const username =  document.querySelector('.username').value
            console.log(username)
            modal.hide()
          })

2.案例:图书管理(增删查改)

  • :注意获取数据渲染列表的时候把图书序号获取过来加到删除编辑模块,是为了后续进行删除编辑可以获取该序号并传给服务器进行操作
js 复制代码
/**
 * 目标1:渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
function getBookList() {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      creator: '老张'
    }
  }).then(result => {
    console.log(result)
    const bookList = result.data.data
    console.log(bookList)
    const htmlStr = bookList.map((item, id) => {
      const { bookname, author, publisher } = item
      return `
      <tr>
          <td>${id + 1}</td>
          <td>${bookname}</td>
          <td>${author}</td>
          <td>${publisher}</td>
          <td data-id=${item.id}>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>
      `
    }).join('')
    const list = document.querySelector('.list')
    list.innerHTML = htmlStr
  })
}
getBookList()
  • :注意新增完之后要先重置表单,下一次点击新增按钮后表单是空的
js 复制代码
// 目标2:新增图书
const creator = '老张'
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
document.querySelector('.add-btn').addEventListener
  ('click', () => {
    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)
      getBookList()
      //重置表单
      addForm.reset()
      addModal.hide()
    })
  })
  • :注意使用的请求方法为删除数据,传递参数的方法为地址传参(由接口文档决定的)
js 复制代码
//3.删除列表项
document.querySelector('.list').addEventListener('click', function (e) {
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${delId}`,
      method: 'DELETE',
    }).then(result => {
      console.log(result)
      getBookList()
    })
  }
})
  • :注意编辑的逻辑是:点击编辑按钮获取该图书的唯一序号发送给服务器------>服务器返回图书信息------>将图书信息赋给编辑图书页面的输入框并显示编辑框------>点击保存按钮将修改的信息包括该图书的id传递给服务器,请求方法为修改数据PUT------>渲染页面
js 复制代码
//4.编辑图书
const editModalDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editModalDom)
document.querySelector('.list').addEventListener('click', function (e) {
  if (e.target.classList.contains('edit')) {
    const editId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${editId}`,
    }).then(result => {
      console.log(result.data.data)
      const bookObj = result.data.data
      //数据对象属性和标签类名一致  防止表单元素过多要一一赋值
      const keys = Object.keys(bookObj)
      keys.forEach(key => {
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      })
    })
    editModal.show()
  }
  //4.1编辑 点击保存
})
document.querySelector('.edit-btn').addEventListener('click', function () {
  const editForm = document.querySelector('.edit-form')
  //注意这里的id是从哪里来的呢 这里的hidden隐藏了 前面点击编辑的时候以及从服务器获取火来并赋值到value了
  // <input type="hidden" class="id" name="id" value="509570">
  const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
  axios({
    url: `http://hmajax.itheima.net/api/books/${id}`,
    method: 'PUT',
    data: {
      bookname,
      author,
      publisher,
      creator
    }
  }).then(result => {
    console.log(result)
    getBookList()
    editModal.hide()
  })
})

3.案例:图片上传

  • 注意当接口文档标明需要FormData格式上传图片时使用该方法
html 复制代码
<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标:图片上传,显示到网页上
     *  1. 获取图片文件
     *  2. 使用 FormData 携带图片文件
     *  3. 提交到服务器,获取图片url网址使用
    */
    document.querySelector('.upload').addEventListener('change', e => {
      //获取图片文件
      console.log(e.target.files[0])
      //使用FormData携带图片文件
      const fd = new FormData()
      fd.append('img', e.target.files[0])
      console.log(fd);

      //提交到服务器
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
      }).then(result => {
        console.log(result)
        const imgURL = result.data.data.url
        document.querySelector('.my-img').src = imgURL
      })

    })
  </script>
</body>
相关推荐
lwprain4 小时前
龙蜥8.10中spark各种集群及单机模式的搭建spark3.5.6(基于hadoop3.3.6集群)
大数据·ajax·spark
知识分享小能手11 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
二掌柜,酒来!1 天前
完美解决:应用版本更新,增加字段导致 Redis 旧数据反序列化报错
redis·spring·bootstrap
Yvonne爱编码1 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
William_cl2 天前
MVC 中 AJAX 与前后端交互深度实战(含独家避坑与场景化方案)
ajax·mvc·交互
Yvonne爱编码2 天前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
tangweiguo030519872 天前
基于 Django 与 Bootstrap 构建的现代化设备管理平台
后端·django·bootstrap
闯闯桑2 天前
Spark 中spark.implicits._ 中的 toDF和DataFrame 类本身的 toDF 方法
大数据·ajax·spark·scala
不爱洗脚的小滕3 天前
【Redis】Scan 命令使用教程:高效遍历海量数据
数据库·redis·bootstrap
睡觉的时候不会困3 天前
Redis 主从复制详解:原理、配置与主从切换实战
数据库·redis·bootstrap