龙华网站建设,网站做超链接薪资多少一个月,精品课程网站建设论文,公众号文章制作一、Bootstrap弹框
功能#xff1a;不离开当前页面#xff0c;显示单独内容#xff0c;供用户操作
步骤#xff1a;
引入bootstrap.css和bootstrap.js准备弹框标签#xff0c;确认结构通过自定义属性#xff0c;控制弹框显示和隐藏 在head部分添加#xff1a…一、Bootstrap弹框
功能不离开当前页面显示单独内容供用户操作
步骤
引入bootstrap.css和bootstrap.js准备弹框标签确认结构通过自定义属性控制弹框显示和隐藏 在head部分添加 link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css 在body结束前添加 script srchttps://code.jquery.com/jquery-3.5.1.slim.min.js/script script srchttps://cdn.jsdelivr.net/npm/popperjs/core2.9.3/dist/umd/popper.min.js/script script srchttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js/script bootstrap的modal弹框添加modal类名默认隐藏 !DOCTYPE html
html
headmeta charsetUTF-8 /titletitle/titlelink relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
/head
body!-- 官网引入https://v4.bootcss.com/docs/components/modal/ --!-- Button trigger modal --
button typebutton classbtn btn-primary data-togglemodal data-target#exampleModalLaunch demo modal/button!-- Modal --div classmodal fade idexampleModal tabindex-1 aria-labelledbyexampleModalLabel aria-hiddentruediv classmodal-dialogdiv classmodal-contentdiv classmodal-headerh5 classmodal-title idexampleModalLabelModal title/h5button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruetimes;/span/button/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/divscript srchttps://code.jquery.com/jquery-3.5.1.slim.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/popperjs/core2.9.3/dist/umd/popper.min.js/scriptscript srchttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js/script/body
/html二、图片上传
获取图片文件对象使用FormData携带图片文件提交表单数据到服务器使用图片url网址
三、 XMLHttpRequest
定义XHR对象用于与服务器交互在AJAX编程中被大量使用
步骤
创建XHR对象配置请求方法和请求URl地址监听loadend事件接收响应结果
bodyscriptconst 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函数
bodyp classmy-p/pscript//1.定义myaxios函数接收配置对象返回Promise对象function myAxios(config) {return new Promise((resolve,reject) {//2.发起xhr请求默认请求方法为getconst 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 对象特性一直串联下去
