VUE 开发——AJAX学习（二）

sooRiverling

已于 2024-09-26 21:13:07 修改

阅读量300

点赞数 3

分类专栏： AJAX VUE 前端文章标签： vue.js 学习前端

于 2024-09-26 20:24:43 首次发布

本文链接：https://blog.csdn.net/weixin_74113429/article/details/142523411

版权

前端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

AJAX

3 篇文章 0 订阅

订阅专栏

一、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类名（默认隐藏）

<!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>

二、图片上传

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

三、 XMLHttpRequest

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

步骤：

创建XHR对象
配置请求方法和请求URl地址
监听loadend事件，接收响应结果

<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函数

<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>