一、Bootstrap弹框
功能:不离开当前页面,显示单独内容,供用户操作
步骤:
- 引入bootstrap.css和bootstrap.js
- 准备弹框标签,确认结构
- 通过自定义属性,控制弹框显示和隐藏
在
<head>
部分添加:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
在<body>
结束前添加:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
bootstrap的modal弹框:添加modal类名(默认隐藏)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- 官网引入:https://v4.bootcss.com/docs/components/modal/ -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
二、图片上传
- 获取图片文件对象
- 使用FormData携带图片文件
- 提交表单数据到服务器,使用图片url网址
三、 XMLHttpRequest
定义:XHR对象用于与服务器交互,在AJAX编程中被大量使用
步骤:
- 创建XHR对象
- 配置请求方法和请求URl地址
- 监听loadend事件,接收响应结果
html
<body>
<script>
const xhr = new XMLHttpRequest()
xhr.open('GET','http://hmajax.itheima.net/api/province')
xhr.addEventListener('loadend',() => {
console.log(xhr.response)
//对响应结果做后续处理
})
xhr.send()
</script>
</body>
四、认识Promise
Promise:用于表示一个异步操作的最终完成(或失败)及其结果值
成功和失败状态,可以关联对应处理程序
成功调用:resolve(值)触发then()执行
失败调用:reject(值)触发catch()执行
<script>
/**
* 使用Promise管理异步任务
*/
//1.创建Promise对象
const p = new Promise((resolve,reject) => {
//2.执行异步代码
setTimeout(() => {
resolve('成功')
},2000)
})
//3.获取结果
p.then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
</script>
五、Promise三种状态
一个Promise对象,必然处于以下几种状态之一:
待定(pending):初始状态,既没有被兑现,也没有被拒绝
已兑现(fulfilled):操作成功完成
已拒绝(rejected):操作失败
Promise对象一旦被兑现/拒绝,就是已敲定,状态无法再被改变
六、封装axios函数
html
<body>
<p class="my-p"></p>
<script>
//1.定义myaxios函数,接收配置对象,返回Promise对象
function myAxios(config) {
return new Promise((resolve,reject) => {
//2.发起xhr请求,默认请求方法为get
const xhr = new XMLHttpRequest()
xhr.open(config.method || 'GET',config.url)
xhr.addEventListener('loadend',() => {
//3.调用成功/失败的处理程序
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
}
//4.使用myaxios函数,获取省份列表展示
myAxios({
url: 'http://hmajax.itheima.net/api/province'
//其他不写,对于上面的get
}).then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {
console.log(error)
document.querySelector('.my-p').innerHTML = error.message
})
</script>
</body>
七、 同步代码和异步代码
同步代码:逐行执行,需原地等待结果后,才继续向下执行
异步代码:调用后耗时,不阻塞代码继续执行(不必原地等待),在将来完成后触发一个回调函数;例如setTimeout就是一个异步代码。
JS中的异步代码:
- setTimeout/setInterval
- 事件
- AJAX
异步代码依靠回调函数接收结果
八、Promise------链式调用
使用then函数返回新Promise 对象特性,一直串联下去