Ajax04

最新推荐文章于 2024-12-20 18:40:03 发布

原创最新推荐文章于 2024-12-20 18:40:03 发布 · 145 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery

Ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了同步与异步的概念，重点讲解了formData对象在获取表单数据，特别是图片文件方面的应用。通过原生和jQuery发起formData请求的方式，并展示了图片预览的实现方法。此外，还探讨了跨页面数据传递的两种策略：利用localStorage和URL参数。

笔记目录

前言
1. 同步与异步
2. formData
- 2.1 原生代码发起formDate请求
- 2.2 利用jQ发起formData请求
3. 图片预览
4. 跨页面传递数据
总结

前言

本章学习内容：同步与异步的区别，原生fromData对象（获取表单数据），图片预览功能，跨页面传递参数。

1. 同步与异步

同步代码：并不是同时执行某些diamante，而是有顺序的执行
代码会严格按照从上到下的顺序执行，只有当前面的代码执行完毕之后，后面的代码才会执行

异步代码：如果程序中有耗时操作，并不会堵塞整个程序的执行
程序会将耗时操作放到异步线程池中去执行，主线程依旧可以正常运行其他同步代码
ajax请求就是异步代码，定时器

ajax请求默认就是异步的代码,但并不代表异步就永远是好的
如果当前有两个ajax请求,A请求的返回结果是B请求的参数

        //  如何将ajax请求改成同步代码: async: false
        console.log('这是一个寂寞的天');
        $.ajax(
            {   async: false,
                type:'get',
                url:'https://autumnfish.cn/api/cover/random',
                success: function (backData) {
                    console.log(backData);
                }
            }
        )
        console.log('下着有些伤心的雨');
    })

2. formData

前面学过快速获得表单域中的数据可以用.serialize()方法，但是这个方法只适合于获取字符串数据，无法获取图片数据

利用formData数据结构来获取表单数据（可以获得图片文件）
利用 new FormData(原生的form对象)

    <form action="">
      姓名: <input type="text" name="heroname" id="" /><br /><br />
      技能: <input type="text" name="heroskill" id="" /><br /><br />
      头像: <input type="file" name="heroicon" id="" /><br /><br />
      <button id="btn" type="submit">点我完成新增</button>
    </form>
    js------------------------
            // 1. 快速获得表单域中的数据
            // serialize(): 获得字符串参数数据 key=value&key=value
            let data = $('form').serialize();
            // 但是: 以上方法只能获得字符串数据,无法获得图片数据
            // console.log(data);

            // 2. 利用formData数据结构来获得表单数据
            // 利用new FormData(原生的form对象)
            let fd = new FormData(document.querySelector('form'));

            // 此时所有的表单数据,都存在fd对象中
            // 但是fd对象是无法直接打印显示的
            // console.log(fd);

            // 3. 利用get方法来获取内部
            console.log(fd.get('heroname'));
            console.log(fd.get('heroskill'));
            console.log(fd.get('heroicon'));

注意： new formData()，必须传入一个原生的form对象；formData实例化的fd对象会得到表单所有的数据，但是需要用.get(属性名)来查看。
有图片就用formData，只有字符串就用serialize。

2.1 原生代码发起formDate请求

   <form action="">
        姓名: <input type="text" name="name" id="" /><br /><br />
        技能: <input type="text" name="skill" id="" /><br /><br />
        头像: <input type="file" name="icon" id="" /><br /><br />
        <!-- 表单控件的name值,必须与服务器接口的参数一致 -->
        <button id="btn" type="submit">点我完成新增</button>
      </form>
      //js------------------------------
    document.querySelector('#btn').addEventListener('click',function (e) {
        e = window.event || e;
        e.preventDefault();

        // 1. 利用formData获得表单数据
        let fd = new FormData(document.querySelector('form'));

        // console.log(fd.get('name'));
        // console.log(fd.get('skill'));
        // console.log(fd.get('icon'));

        // 2. 发起原生ajax请求
        let xhr = new XMLHttpRequest();
        xhr.open('post','http://localhost:4399/hero/add');

        // 注意: 一般的原生post请求,必须要设置请求头,指定数据编码方式
        // 但是,如果是利用formData编码的数据,则不需要设置请求头
        // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        
        xhr.onload = function () {
            console.log(xhr.response);
        }

        // 3. 直接利用send方法传入fd结构数据即可
        xhr.send(fd);

    })

注意：表单中的name值，必须和服务器接口的参数一致
原生请求如果是传入的参数是一个formData对象，不用设置请求头！

2.2 利用jQ发起formData请求

    $(function(){
        $('#btn').on('click',function (e) {
            e.preventDefault();

            let fd = new FormData(document.querySelector('form'));

            $.ajax(
                {
                    type:'post',
                    url:'http://localhost:4399/hero/add',
                    data: fd,// 直接传入fd对象即可
                    // 如果使用jQ方式发起formData数据请求,则需要关闭两个默认属性:false
                    contentType: false,
                    processData: false,
                    success: function (backData) {
                        console.log(backData);
                    }
                }
            )
        })
    })

jQ的post请求已经在内部设置好了请求头，所以需要将两个参数设为false；contentType: false, processData: false。

3. 图片预览

原理：监听上传文件按钮（input type=file）的change事件，发生改变时

通过原生属性files来获取文件数据
利用URL对象转成url路径
把路径传给img的src属性

    $(function(){
        // 实现图片上传预览功能
        // 1. 监听上传按钮是否发生改变: change
        $('input').on('change', function () {
            // 2. 获得当前上传的图片文件数据
            // 通过原生属性files来获得文件数据
            let picData = this.files[0];

            // 3. 将获得图片文件数据转换url路径
            // 利用URL对象来转成路径
            let picUrl = URL.createObjectURL(picData);

            // 4. 将路径设置img标签即可
            $('img').attr('src', picUrl);
        })
    })

4. 跨页面传递数据

需求：把页面a中的参数num=100传递到页面b

利用localStorage对象，a页面把通过localStorage.setItem(‘num’,100)把数据存到本地，b页面再通过localStorage.getItem(‘num’)取数据。
利用跳转路径传递参数，a页面在跳转路径的后面拼接？加要传的参数（num=100），跳转到b页面后 b页面的url后面也会有这个参数，通过window.location.href拿到url，再处理一下得到参数。
和方法二一样是用路径传递，只不过利用window.location.search可以直接得到？+后面的参数

    // 1.利用localStorage对象获取本地数据
    // console.log(localStorage.getItem('id'));

    // 2. 利用跳转路径传递参数
    // 此时需要的参数已经在url末端,那么要如何获得
    // let url = window.location.href;// 当前的路径

    // // 利用字符串方法,截取需要的字段
    // let index = url.indexOf('?');// 获得?此时的下标

    // // 利用字符串的截取方法
    // let res = url.substr(index+1);

    // // 利用字符串转数组的方法
    // let arr = res.split('=');
    // console.log(arr[1]);

    // 3. 利用location对象中的属性直接获得参数部分
    console.log(window.location.search);
    console.log(window.location.search.split('=')[1]);

复习一下：window.location.href获取完整的url地址，window.location.search获得？+后面的参数部分
indexOf（需要查找下标的字符串），substr（开始切割下标，切的个数），split（‘分隔符’）会转成数组。
~~案例-英雄检索~~
~~用户信息管理~~

总结

今日学习：formData对象获取form表单数据（含图片文件）
formData做参数发起ajax请求，（切记：原生post不用设置请求头，jQ post 需要把contentType和processData两个属性设为false）
同异步了解
跨页面传递参数，（路径传参）
图片预览：监听change事件–获取文件（this.files[0]）–文件转换成url（URL.createObjectURL(文件)）–替换img的src=转好的url