Ajax第二天

查询指定数据（get）

一、根据参数

​ 语法：params:{属性名：属性值}

<script src="./lib/axios.js"></script>
    <script>
        // 小括号保大括号
        axios ({
            // 请求方式
            method:`get`,
            url:`http://www.itcbc.com:3006/api/getbooks`,
            // 请求参数 指定一个参数写一个
            // 多个参数 含义是 && 条件都要满足
            params:{
                id:5913, // 后端返回 ID为5913的那一条数据
                author:`王勇`
            }
        }).then((result)=>{
            let arr = result.data.data
            render(arr)
        })

        function render(arr) {
            let html = arr.map((value)=>`<tr>
                <td>${value.id}</td>
                <td>${value.bookname}</td>
                <td>${value.author}</td>
                <td>${value.publisher}</td>
            </tr>`).join(``)

            document.querySelector(`tbody`).innerHTML = html
        }
        /* 指定参数查询对应的数据
        必须要写在params对象中 以键值对的形式存在
        写什么样的键值对，规定要由后端来决定 不懂就问 */
</script>

总结：

​ 1.请求参数指定一个 属性名：属性值

​ 2.请求参数多个时 注意含义是 &&

​ 3.必须写在params对象中

​

二、其他方式

​ 语法：url：".....?属性名=属性值"

<script>
        axios ({
            method:`get`,
            // 查询指定数据 固定写法 属性名=属性值 ？ 多个数据 用 &
            url:`http://www.itcbc.com:3006/api/getbooks?id=5913&author=王勇`,
        }).then((result)=>{
            let arr = result.data.data
            render(arr)
        })

        function render(arr) {
            let html = arr.map((value)=>`<tr>
                <td>${value.id}</td>
                <td>${value.bookname}</td>
                <td>${value.author}</td>
                <td>${value.publisher}</td>
            </tr>`).join(``)

            document.querySelector(`tbody`).innerHTML = html
        }
</script>

总结：

​ 1.直接在地址后面 ?属性名=属性值

​ 2.多个参数用&隔开

指定数据查询案例

<script>
        getData()
        const inp = document.querySelector(`input`)
        inp.addEventListener(`keydown`, function (e) {

            if (e.key === `Enter`) {
                console.log(`出来`);
                // 去除 左右两侧空格
                const value = inp.value.trim()
                // true 把输入的值去除了空格 输入
                if (value) {
                    // 设定一个形参 就是要拼接的字符串(指定数据)
                    const queryStr = `?bookname=${value}`
                    // 传入形参
                    getData(queryStr)
                    // false 没有值 就没去除空格 
                } else {
                    // 没有值 不传形参 就是用默认值
                    getData()
                }
            }
        })

        // 复用 封装函数  细节点：默认值 如果没有给形参 就是默认值空字符串 
        function getData(query = ``) {
            axios({
                method: `get`,
                // 如果不写默认值没传参 会输入 undefined 
                // 变成http://www.itcbc.com:3006/api/getbooks+undefined,
                url: `http://www.itcbc.com:3006/api/getbooks` + query,
            }).then((result) => {
                let arr = result.data.data
                render(arr)
            })
        }

        function render(arr) {}
</script>

总结：

​ 1.第一种方式写在params内

​ 2.第二种方式写在url后用？拼接,多个数据用&

​ 3.params是用属性名：属性值，url是用属性名 =属性值

​ 4.get方式必须用params对象

​ 5.url地址注意是get

新增数据（post）

​ 语法：data:{}

<script>
    const btn = document.querySelector(`button`)
    btn.addEventListener(`click`, function () {
      axios({
        method: `post`,
        url: `http://www.itcbc.com:3006/api/addbook`,
        data: {
          bookname: `博士理论`,
          author: `黄某`,
          publisher: `黄某出版社`
        }
      }).then((result) => {
          console.log(result);
        })
    })
</script>

总结：

​ 1.新增数组 用post方法

​ 2.url地址 是 add地址

​ 3.post 要用 data新增

新增数据案例

<script>
        getData()
        const keyword = document.querySelector(`.keyword`)
        const booknameDom = document.querySelector('.bookname');
        const authorDom = document.querySelector('.author');
        const publisherDom = document.querySelector('.publisher');
        const btnaddDom = document.querySelector('.btnadd');

        keyword.addEventListener(`keydown`, function (e) {

            if (e.key === `Enter`) {
                console.log(`出来`);
                const value = keyword.value.trim()
                if (value) {
                    const queryStr = `?bookname=${value}`
                    getData(queryStr)
                } else {
                    getData()
                }
            }
        })

        btnaddDom.addEventListener(`click`, function () {
            const bookname = booknameDom.value;
            const author = authorDom.value;
            const publisher = publisherDom.value;

            const data = {
                bookname,
                author,
                publisher
            }
            axios({
                method: `post`,
                url: 'http://www.itcbc.com:3006/api/addbook',
                data,
            }).then((result) => {
                console.log(result);
                getData()
                booknameDom.value = '';
                authorDom.value = '';
                publisherDom.value = '';
            })
        })

        function getData(query = ``) {}

        function render(arr) {}
</script>

接口基础概念

​ 1.使用Ajxa请求数据，被请求的URL地址，就叫接口数据（接口或Web接口）

​ 2.每个接口都必须有对应的请求方式

接口文档格式

总结：

​ 1.在浏览器地址栏 输入接口地址 也属于GET请求 固定搭配

​ 2.POST DELETE 不能用浏览器调用方法(不可以在浏览器操作)

​ 3.get请求传参参数方式两种

1 url上拼接(可在浏览器操作)

2 params指定 

删除案例(关键代码)

<script>
        tbody.addEventListener(`click`, function (e) {
            if (e.target.nodeName === `A`) {
                if(!confirm(`您确定删除？😔`)){
                    return
                }
                const { id } = e.target.dataset
                axios({
                    method: `delete`,
                    url: `http://www.itcbc.com:3006/api/delbook`,
                    params: {
                        id
                    }
                }).then((result) => {
                    getData()
                })
            }
        })
</script>

总结：

​ 1.confir是JS中自带确认框 点击确地返回true,取消返回false

​ 2.const{id}因为获取的格式是对象格式

network面板

​ 本质：抓取到所有的网络请求

​ 作用：查看当前Ajax请求的详细信息，进行错误的排查

form封装拼接函数

<script>
        console.log(getForm(`.f1`));
        function getForm(query = ``) {
            let inp = document.querySelectorAll(query + ` input[name]`)
            let obj = {}
            // for (let index = 0; index < inp.length; index++) {
            //     obj[inp[index].name] = inp[index].value
            // }
            inp.forEach((dom)=>{
                obj[dom.name]=dom.value
            })
            return obj
        }
</script>

总结：

​ 1.属性选择器 input[name]选中带有name属性的所有标签

​ 2.伪数组可以forEach遍历数组

​ 3.添加对象属性 obj[属性名.属性值]=属性名.属性值