Ajax-02

一.form-serialize插件

        作用：快速收集表单元素的值

const form = document.querySelector('.example-form')
const data = serialize(form,{hash:true,empty:true})

        *参数1：要获取哪个表单的数据

                表单元素设置name属性，值会作为对象的属性名

                建议name属性的值，最好和接口文档参数名一致

        *参数2：配置对象

                hash设置获取数据结构

                        -true：JS对象（推荐）一般请求体里提交给服务器

                        -false：查询字符串

                empty设置是否获取空值

二.使用Bootstrap弹框

        1.引入bootstrap.css和bootstrap.js

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

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

<button data-bs-toggle="modal" data-bs-target="css选择器">显示弹框</button>

<button data-bs-dismiss="modal">Close</button>

        Bootstrap弹框

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

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

// 创建弹框对象
const modalDom = document.querySelector('css选择器')
const modal = new bootstrap.Modal(modalDom)

// 显示弹框
modal.show()
// 隐藏弹框
modal.hide()

三.案例_图书管理_总结

        核心步骤—渲染数据

        

        核心步骤—新增数据

                                

        核心步骤—删除数据

                                

        核心步骤—编辑数据