首页 > 其他分享 >AJAX记录

AJAX记录

时间:2023-11-24 23:47:10浏览次数:33  
标签:resolve console log 记录 AJAX result new const

AJAX

目录

1.绑定事件点击判断类名的

document.querySelector('.list').addEventListener('click', (e) =>{ 
    if (e.target.classList.contains('edit')) {
        editModal.show()
    }
})

2.事件文件列表

document.querySelector('.upload').addEventListener('change', (e) => {
            // files是内置属性
            console.log(e.target.files[0])
            // 使用FormData携带图片文件,这个也是内置函数,专门放文件得
            const fd = new FormData()
            // 往fd这个文件推进图片文件
            fd.append('img', e.target.files[0])
            console.log(fd)
            // 提交到服务器
            axios({
                url:'https://hmajax.itheima.net/api/uploadimg',
                method: 'POST',
                data: fd
            }).then(result => {
                console.log(result)
                // 取出图片url网站,用img标签加载显示
                const imgData = result.data.data.url
                document.querySelector('img').src = imgData

            })
        })
        以后看到请求参数有form-data的就用new FormData()把参数装好

3.关联标签

<label for="bg">更换背景</label>
<input class="bg-ipt" type="file" id="bg">
label通过for关联另外一个标签,点击label标签的内容就相当于点击了input了

4.转义符号

image-20231119110956346

        // &lt;是转义符号

5.耦合性

// 耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象,
比如回调函数地狱,回调函数嵌套着另一个回调函数

6.事件循环经典面试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 目标:回答代码执行顺序
        console.log(1)
        setTimeout(() => {
          console.log(2)
          const p = new Promise(resolve => resolve(3))
          p.then(result => console.log(result))
        }, 0)
        const p = new Promise(resolve => {
          setTimeout(() => {
            console.log(4)
          }, 0)
          resolve(5)
        })
        p.then(result => console.log(result))
        // 下面Promise调用成功后p2.then才是异步的的
        const p2 = new Promise(resolve => resolve(6))
        p2.then(result => console.log(result))
        console.log(7)
        // 顺序是1,7,5,6,2,3,4
      </script>
</body>
</html>
视频讲解:【黑马程序员前端AJAX入门到实战全套教程,包含学前端框架必会的(ajax+node.js+webpack+git),一套全覆盖】 https://www.bilibili.com/video/BV1MN411y7pw/?p=56&share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96

标签:resolve,console,log,记录,AJAX,result,new,const
From: https://www.cnblogs.com/ke-xi/p/17855033.html

相关文章

  • Web API(一些记录)
    WebAPI(一些记录)1.注意当使用间隔函数的时候做轮播图,点点的效果,删除需要放在间隔函数内,不能在函数外面声明,在外面的话删的点就固定了,放里面就是每执行一次就再选择一次2.i--在事件点击函数里面也是立马执行吗,不是先把函数里面的其他东西执行完,再执行i--吗?答:是的因为i--它是独......
  • git bisect 查找引入bug的提交记录
    它的原理就是将代码提交的历史,按照两分法不断缩小定位。就是将代码历史一分为二,确定问题出在前半部分,还是后半部分,不断执行这个过程,直到范围缩小到某一次代码提交。step1:查找提交记录,找到可能引入错误的提交记录区间gitlog--pretty=onelinestep2:开始使用gitbisect......
  • 西北电专电院_数据结构上机报告记录_第三次上机报告
    内容比较简单,和其他院的上机比起来说是这样的实现二叉树的基本操作,二叉树使用链式结构建立,基本操作基本用递归实现 1.问题描述二叉树的基本操作;(1)创建二叉树,需注意此处是按照先序法输入(2)通过先序遍历、中序遍历、后序遍历分别输出二叉树(3)求取二叉树的结点总数、树的深度......
  • 【刷题记录】20231124 线段树分治
    做题记录:注意到每次相当于\(0\)后面加\(1\),\(1\)后面加\(0\),因此每次可以合并01和10然后将问题规模减半。黑白染色,白格子=lcm+1,黑格子=prime相乘。发现横着竖着有六个质数,斜着只用四个质数。调整一下顺序即可。状压DP。考虑S作为前缀max时S与U-S的排列方案数。S每......
  • 记录--买不起劳力士,一气之下熬夜写一个
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助最近喜欢研究起了手表,对劳力士这款“百事圈”实在是心水的不行啊!心痒难耐无奈钱包不支持,作为一个前端程序员,买不起的东西该怎么办?当然是自己做一个啊!说干就干,熬夜自己做了个“百事圈”出来!源码在最后!先看成品......
  • Hadoop第一天学习记录
    今天,我开始接触并学习Hadoop,一个分布式存储和计算框架,广泛应用于大数据处理和分析领域。为了方便记录和回顾,我将在这里详细记录下我第一天的学习内容和心得。首先,我了解了Hadoop的背景和基本概念。Hadoop起源于ApacheNutch项目,旨在构建一个分布式搜索引擎。然而,随着项目的演进,Hado......
  • JVM学习记录五(JVM调优)
    参数设置1.在tomcat中的设置,修改tomcat下/bin/catalina.sh中设置2.在jar启动时命令设置nohupjava-Xms512m-Xmx1024m-jar-demo.jar&参数调优设置堆空间大小:一般默认大小设置为物理内存的1/64,最大大小设置为  1/4,具体情况还是要根据当前主机的的实际使用情况,是不是还有其......
  • C# 中增加一个使用StopWatch记录方法执行时间的通用方法
    目录一背景二源码2.1注意事项三使用方法一背景在很多时候我们在进行代码排查的时候需要在日志中记录代码的执行时间从而方便我们进行代码运行效率的执行,我们在日志中准确记录方法的执行时间,这样方便我们进行代码的排查,下面分享一个我们常用的记录方式,方便使用,而且最重要的......
  • Python使用sys.excepthook统一处理异常,并将异常信息记录到日志中
    importsysimporttimeimporttracebackfromdatetimeimportdatetimefromseleniumimportwebdriverfromselenium.webdriver.common.byimportByfromselenium.webdriver.supportimportexpected_conditionsasECfromselenium.webdriver.support.uiimportWeb......
  • 记录今天最后一个bug
    重大发现:使用axios时,当路径下面出现下划线时,一般路径就没问题如果没出现下划线,记得去看看路径出错了没背景:前端vue中使用axios时路径写错,少加了“//”,导致找bug找了半小时,nnd 错误案例 正确例子重大发现:使用axios时,当路径下面出现下划线时,一般路径就没问题如果没出现......