Ajxa 第三天

一、编辑数据

1650947006879

    <script>
        getDate()
        let arr
        let id
        const tbody = document.querySelector(`tbody`)
        const booknameValue = document.querySelector('.bookname');
        const authorValue = document.querySelector('.author');
        const publisherValue = document.querySelector('.publisher');
        const btnadd = document.querySelector(`.btnadd`)

        tbody.addEventListener(`click`, function (e) {
            if (e.target.className === `editbtn`) {
                let index = e.target.dataset.index
                console.log(arr[index]);
                booknameValue.value = arr[index].bookname
                authorValue.value = arr[index].author
                publisherValue.value = arr[index].publisher
                id=arr[index].id
            }
        })

        btnadd.addEventListener(`click`, function () {
            let data = {
                id:id,
                bookname:booknameValue.value,
                author:authorValue.value,
                publisher:publisherValue.value,
                appkey: `HZD123`
            }
            console.log(data);
            axios({
                method:`put`,
                url:`http://www.itcbc.com:3006/api/updatebook`,
                data,
            }).then((result)=>{
                getDate()
            })
        })


        function getDate() {}
</script>

总结：

1.appkey：``相当于账户密码只显示自己的数据

2.通过data-index=“${index}” e.target.dataset.index 获取下标进行操作

二、form表单

本质：负责数据采集，提交的功能由三个部分组成：表单标签，表单域，表单按钮。（表单默认提交行为会导致页面跳转）

作用：如登录信息的采集，用户的详细信息。

1650945225201

<body>
    // 需要指定请求方式和 URL地址
    <form action="http://www.itcbc.com:3006/api/getbooks" method="get">
        <div>
            <label for="">用户</label>
            <input type="text" name="username">
        </div>
        <button>提交</button>
    </form>
</body>

通过Ajax提交表单数据

作用：可以防止表单默认提交行为导致的页面跳转问题，提高用户体验

特点：

1.监听表单提交事件

2.阻止默认提交行为

3.基于axios发起请求

4.指定请求方式，请求地址

5.指定请求体数据

总结：

1.旧方式提交数据直接在form标签操作方式提交

2.旧方式会刷新页面调整页面情况，用户体验差

3.如果input不加name属性，数据就不会提交到后端

4.Ajax方法是异步网络请求，这样用户体验好（一边使用功能，同时提交数据）

5.Ajax技术是完全可以不给标签加name的，只是习惯下来的行业规范

三、serialize()函数

作用：是jQuery的一种函数，能够一次性获取表当中采集的数据

语法：$(“表单元素的选择器”).seroalize()

<!-- 引入JQ的js文件 -->
    <script src="./lib/jquery.js"></script>
    <script>
        const btn = document.querySelector(`button`)
        btn.addEventListener(`click`,function(){
            const data = $(`form`).serialize()
            console.log(data);
        })
    </script>

总结：

1.使用此函数，必须为每一个表单域添加name属性

1650958335218

2.是JQ封装的，使用要引入

3.结果是一个查询字符串结构

4.能获取隐藏域的值，不能得到禁用状态的值，不能得到文件域的信息

快速获取表单数据(自封装)

老师思路：

<script>
function getForm(query) {
            // JS内置对象处理表单数据把所有表单标签-name属性 要new 
            //  form 对象，包含所有表单数据（input name属性）
            const form = new FormData(document.querySelector(query))
            // URL 处理url上的参数 转成get 参数格式 对象 要new
            const usp = new URLSearchParams()
            // forEach((值，键)) 固定写法 要对form遍历 出处理好的数据
            form.forEach((value,key)=>{
                // 这是url的一种方法 添加 追加
                usp.append(key,value)
            })

            // 也是url 一种方法 ，把数据转成url的参数格式
            const data = usp.toString()
            return data
        }
</script>

我的思路：

\<script>
// 这个 把form表单name属性全部获取
        let form = new FormData(document.querySelector(`form`))
        // 这个new 用来处理参数 转成get 的格式 等下用来调用他的方法
        let usp = new URLSearchParams()
        // 获取了所有属性 这个时候要遍历 因为是对象 这里固定写法
        form.forEach((value,key)=>{
            // 调用这个方法 把form的数据 添加进去 等下转换
            usp.append(key,value)
        })

        // 把usp里的数据 调用这个方法 就能获得url 要的那种参数格式
        let data = usp.toString()
        console.log(data);
</script>

总结：

1.new FormData获取表单 name属性所有标签

2.new URLsearchparams 处理数据转成get的字符串格式

3.usp.append(键，值) 添加数据

4.usp.toString（）转换添加的数据

普通数据转URLsearch。。

<script>
        const form = new FormData(document.querySelector(`form`))
        // 直接把获取的数据 插进去 可以直接转换 之前那个是需要理解的底层原理
        const usp = new URLSearchParams(form)
        let data = usp.toString()
        console.log(data);
</script>

总结：

1.首先明白自封装底层原理

2.new URLSearchParams（传参）可以把获取的数据直接转换

post补充

post传递参数方式

1.对象类型（之前使用的方式）

2.字符串格式类型

<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=黄某魔法&appkey=HZD123`,
            }).then((result)=>{
                console.log(result);
            })
        })
</script>

axios简写

axios.get() / .post() / .delete() / .put()

<script>
        //写法1 get(URL)
        axios.get("http://www.itcbc.com:3006/api/getbooks?appkey=HZD123")
        .then((result)=>{
            console.log(result);
        })
        //写法2 get(URL,{params:参数})
        axios.get("http://www.itcbc.com:3006/api/getbooks?appkey=qiu123")
        .then((result)=>{
            console.log(result);
        })

        // 写法1 axios.post(url,参数(对象))
        axios.post("http://www.itcbc.com:3006/api/addbook?appkey=HZD123",{
            bookname:`黄某`,
            author:`黄某`,
            publisher:`黄某之家`,
            appkey:`xxx`
        }).then((result)=>{
            console.log(result);
        })

        let data = {
            bookname:`黄某`,
            author:`黄某`,
            publisher:`黄某之家`,
        }

        // 写法2 axios.post(url,参数(字符串))
        axios.post("http://www.itcbc.com:3006/api/addbook?appkey=xxx",`bookname=黄某&author=黄某&publisher=黄某之家&appkey=HZD123`
        ).then((result)=>{
            console.log(result);
        })
    </script>

总结：

1.get写法: axios.get(url);axios.get(url,{params:{a:1,b:2}})

2.post写法: axios.post(url,参数)，参数可以是对象类型也可以是字符串

四、FormData和文件上传

FormData

本质：是一个浏览器对象，用于管理表单数据。

作用：

1.和JQ中serialize()函数作用一样，用于快速手机表单数据

2.上传文件的功能（上传文件请求参数给后端的参数肯定是formdata）

<script>
			function getForm(query) {
           // JS内置对象处理表单数据把所有表单标签-name属性 要new 
           //  form 对象，包含所有表单数据（input name属性）
   			const form = newFormData(document.querySelector(query))
            // URL 处理url上的参数 转成get 参数格式 对象 要new
          	const usp = new URLSearchParams()
            // forEach((值，键)) 固定写法 要对form遍历 出处理好的数据
            form.forEach((value,key)=>{
                // 这是url的一种方法 添加 追加
                usp.append(key,value)
            })

            // 也是url 一种方法 ，把数据转成url的参数格式
            const data = usp.toString()
            return data
        }
</script>

API用法

1650986846871

formdata和serialize区别

1.前者属于原生的代码，后者是JQ封装的方法

2.前者可以收集文件域二代值，后者不能

3.如果有文件上传，则必须使用formdata

4.得到的结果数据类型不同（了解）

文件上传

第一步

1.明确文件上传类型：image/* 指定图片

2.明确事件类型，change事件，上传图片触发函数

3.URL.createObjectURL()获取浏览器中图片文件地址

<body>
    <img src="" alt="">
    <!-- accept 指定文件上传类型 image/* video/* 其他需要找文档 -->
    <input type="file" accept="image/*"> 
</body>
<script>
    const inp = document.querySelector(`input`)
    const img = document.querySelector(`img`)
    // 使用change 事件 代表input内发生变化后(图片上传) 触发的事件
    inp.addEventListener(`change`,function(){
        const file = this.files[0]
        console.log(this.files);
        // 新代码 把浏览器内存中图片文件地址· 获取出来
        const src = URL.createObjectURL(file)
        img.src=src
    })
</script>

第二步

1.把图片上传服务器，根据接口文档、URL、请求类型、请求参数

2.运用FormData上传文件

3.使用FormData的appen方法

<script>
    const inp = document.querySelector(`input`)
    const img = document.querySelector(`img`)
    inp.addEventListener(`change`, function () {
        const file = this.files[0]
        const src = URL.createObjectURL(file)
        img.src = src
        
        // 现在把图片上传服务器 根据接口文档 url 请求类型 请求参数（重点）
        // formData 除了获取form表单数据 还能使用文件上传
        // 上传文件 请求参数 给后端的参数肯定是formdata类型
        const formdata = new FormData()

        // 接口要求 把文件追加到 formdata中
        formdata.append(`avatar`,file)

        axios({
            method:`post`,
            url:`http://www.itcbc.com:3006/api/formdata`,
            data:formdata
        }).then((result)=>{
            console.log(result);
        })
        
    })
</script>

总结：

需求：用户选择本地的图片上传

1.指定文件上传类型

2.给输入框绑定改变事件图片上传触发行为

3.this.files 获取文件的数组

4.选择直接上传文件还是现在网页显示图片来确定‘

5.把图片上传到服务器 axios

五、拦截器

作用：

当网络慢页面如果没有相应状态就要显示一个加载中的友好提示，提升用户体验，防止用户一直点击

使用方法（在请求前）：

1.添加请求拦截器

2.添加响应拦截器

<script>
        // 添加请求拦截器
        axios.interceptors.request.use(
            function (config) {
                // 在发送请求之前做些什么
                // console.log('发送前 拦截器 ');
                document.querySelector(`img`).style.display = `block`
                return config;
            },
            function (error) {
                // 对请求错误做些什么
                return Promise.reject(error);
            }
        );

        // 添加响应拦截器
        axios.interceptors.response.use(
            function (response) {
                document.querySelector('img').style.display = 'none';
                return response;
            },
            function (error) {
                // 超出 2xx 范围的状态码都会触发该函数。
                // 对响应错误做点什么
                return Promise.reject(error);
            }
        );
        const button = document.querySelector('button');
        button.addEventListener('click', function () {
            // 发送网络请求
            axios
                .get('http://www.itcbc.com:3006/api/getbooks?appkey=wanshao1234')
                .then((result) => {
                    console.log(result);
                });
        });
</script>

总结：

1.先了解如何添加拦截器，具体功能先别深究

2.拦截器写在发送请求前

Ajax 第三天