VUE 开发——AJAX学习(二)

一、Bootstrap弹框

功能:不离开当前页面,显示单独内容,供用户操作

步骤:

  1. 引入bootstrap.css和bootstrap.js
  2. 准备弹框标签,确认结构
  3. 通过自定义属性,控制弹框显示和隐藏

<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">&times;</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>

二、图片上传

  1. 获取图片文件对象
  2. 使用FormData携带图片文件
  3. 提交表单数据到服务器,使用图片url网址

三、 XMLHttpRequest

定义:XHR对象用于与服务器交互,在AJAX编程中被大量使用

步骤:

  1. 创建XHR对象
  2. 配置请求方法和请求URl地址
  3. 监听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 对象特性,一直串联下去

相关推荐
Komorebi.py29 分钟前
【Linux】-学习笔记05
linux·笔记·学习
Mr_Xuhhh35 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app