杨国强20230112

今日学习内容：超时时间<script>
       // timeout--是xhr的一个属性，用来设置超时时间
       // ontimeout--事件，一旦服务器返回的时间超时，取消本次ajax请求，触发ontimeout时间
       var xhr = new XMLHttpRequest();

       //设置超时时间服务器2秒没有响应视为超时
       //一旦超时就会触发ontimeout事件
       xhr.timeout=2000;
       xhr.ontimeout=function(){
        console.log('超时已取消');
       }
            xhr.open('get','http://162.14.107.109/list');
            xhr.send();
            onload---response
            xhr.onload = function () {
              console.log('onload',xhr.responseText);
            };
    </script>
  //formData:能够一次性获取表单的所有数据
      // 使用步骤:
      // 1.获取整个表单对象
      // 2.实例化FormData，并讲表单对象作为参数传递给FormData()
文件上传 <script>
        //获取dom节点
        const ipt=document.querySelector('#ipttext');
        const file=document.querySelector('#file');
        // ipt.addEventListener('click',function(){
        //     console.log(111);
        // })
        //点击事件加给img
        //通过img点击事件，来触发input的file事件
        file.addEventListener('click',function(){
            ipttext.click()
        });
        //监听--input--type=file  的change事件
        ipt.addEventListener('change',function(){
            console.dir(this);
            console.dir(this.files);
            console.dir(this.files[0]);

            let fd=new FormData();
            fd.append('images',this.files[0]);
            fd.append('id',1174);

            axios.post('http://162.14.107.109/upload',fd).then(res=>{
                console.log(res);
                console.log(res.data.data.src);
                //把后端返回的图片路径，img，进行替换
                file.src='http://'+res.data.data.src;
            })
        });

    </script>