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 对象特性,一直串联下去

相关推荐
秃头佛爷40 分钟前
Python学习大纲总结及注意事项
开发语言·python·学习
dayouziei3 小时前
java的类加载机制的学习
java·学习
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
dsywws6 小时前
Linux学习笔记之vim入门
linux·笔记·学习
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot