devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AJAX——接口文档

作者：不正经 | 2024-02-18 03:58:55

赞

踩

AJAX——接口文档

1 接口文档

接口文档：描述接口的文章

接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数

传送门：AJAX阶段接口文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>接口文档</title>
  9. </head>
  10.  
  11. <body>
  12.   <button class="btn">用户登录</button>
  13.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  14.   <script>
  15.     // 用户注册
  16.     // axios({
  17.     //   url: 'http://hmajax.itheima.net/api/register',
  18.     //   method: 'post',
  19.     //   data: {
  20.     //     username: 'itheima007',
  21.     //     password: '7654321'
  22.     //   }
  23.     // })
  24.  
  25.     document.querySelector('.btn').addEventListener('click', () => {
  26.       // 用户登录
  27.       axios({
  28.         url: 'http://hmajax.itheima.net/api/login',
  29.         method: 'post',
  30.         data: {
  31.           username: 'itheima007',
  32.           password: '7654321'
  33.         }
  34.       })
  35.     })
  36.   </script>
  37. </body>
  38.  
  39. </html>

2 案例-用户登录

1.点击登录时，判断用户名和密码长度

2.提交数据和服务器通信

3.提示信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>案例_登录</title>
  9.   <!-- 引入bootstrap.css -->
  10.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  11.   <!-- 公共 -->
  12.   <style>
  13.     html,
  14.     body {
  15.       background-color: #EDF0F5;
  16.       width: 100%;
  17.       height: 100%;
  18.       display: flex;
  19.       justify-content: center;
  20.       align-items: center;
  21.     }
  22.  
  23.     .container {
  24.       width: 520px;
  25.       height: 540px;
  26.       background-color: #fff;
  27.       padding: 60px;
  28.       box-sizing: border-box;
  29.     }
  30.  
  31.     .container h3 {
  32.       font-weight: 900;
  33.     }
  34.   </style>
  35.   <!-- 表单容器和内容 -->
  36.   <style>
  37.     .form_wrap {
  38.       color: #8B929D !important;
  39.     }
  40.  
  41.     .form-text {
  42.       color: #8B929D !important;
  43.     }
  44.   </style>
  45.   <!-- 提示框样式 -->
  46.   <style>
  47.     .alert {
  48.       transition: .5s;
  49.       opacity: 0;
  50.     }
  51.  
  52.     .alert.show {
  53.       opacity: 1;
  54.     }
  55.   </style>
  56. </head>
  57.  
  58. <body>
  59.   <div class="container">
  60.     <h3>欢迎-登录</h3>
  61.     <!-- 登录结果-提示框 -->
  62.     <div class="alert alert-success" role="alert">
  63.       提示消息
  64.     </div>
  65.     <!-- 表单 -->
  66.     <div class="form_wrap">
  67.       <form>
  68.         <div class="mb-3">
  69.           <label for="username" class="form-label">账号名</label>
  70.           <input type="text" class="form-control username">
  71.         </div>
  72.         <div class="mb-3">
  73.           <label for="password" class="form-label">密码</label>
  74.           <input type="password" class="form-control password">
  75.         </div>
  76.         <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
  77.       </form>
  78.     </div>
  79.   </div>
  80.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  81.   <script>
  82.     // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
  83.     
  84.     // 1.1 登录-点击事件
  85.     document.querySelector('.btn-login').addEventListener('click', () => {
  86.       // 1.2 获取用户名和密码
  87.       const username = document.querySelector('.username').value
  88.       const password = document.querySelector('.password').value
  89.       // console.log(username, password)
  90.  
  91.       // 1.3 判断长度
  92.       if (username.length < 8) {
  93.         console.log('用户名必须大于等于8位')
  94.         return // 阻止代码继续执行
  95.       }
  96.       if (password.length < 6) {
  97.         console.log('密码必须大于等于6位')
  98.         return // 阻止代码继续执行
  99.       }
  100.  
  101.       // 1.4 基于axios提交用户名和密码
  102.       // console.log('提交数据到服务器')
  103.       axios({
  104.         url: 'http://hmajax.itheima.net/api/login',
  105.         method: 'POST',
  106.         data: {
  107.           username,
  108.           password
  109.         }
  110.       }).then(result => {
  111.         console.log(result)
  112.         console.log(result.data.message)
  113.       }).catch(error => {
  114.         console.log(error)
  115.         console.log(error.response.data.message)
  116.       })
  117.     })
  118.   </script>
  119. </body>
  120.  
  121. </html>

3 案例-登录-提示消息

1.点击登录时，判断用户名和密码长度

2.提交数据和服务器通信

3.提示信息

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>案例_登录_提示消息</title>
  9.   <!-- 引入bootstrap.css -->
  10.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  11.   <!-- 公共 -->
  12.   <style>
  13.     html,
  14.     body {
  15.       background-color: #EDF0F5;
  16.       width: 100%;
  17.       height: 100%;
  18.       display: flex;
  19.       justify-content: center;
  20.       align-items: center;
  21.     }
  22.  
  23.     .container {
  24.       width: 520px;
  25.       height: 540px;
  26.       background-color: #fff;
  27.       padding: 60px;
  28.       box-sizing: border-box;
  29.     }
  30.  
  31.     .container h3 {
  32.       font-weight: 900;
  33.     }
  34.   </style>
  35.   <!-- 表单容器和内容 -->
  36.   <style>
  37.     .form_wrap {
  38.       color: #8B929D !important;
  39.     }
  40.  
  41.     .form-text {
  42.       color: #8B929D !important;
  43.     }
  44.   </style>
  45.   <!-- 提示框样式 -->
  46.   <style>
  47.     .alert {
  48.       transition: .5s;
  49.       opacity: 0;
  50.     }
  51.  
  52.     .alert.show {
  53.       opacity: 1;
  54.     }
  55.   </style>
  56. </head>
  57.  
  58. <body>
  59.   <div class="container">
  60.     <h3>欢迎-登录</h3>
  61.     <!-- 登录结果-提示框 -->
  62.     <div class="alert alert-success" role="alert">
  63.       提示消息
  64.     </div>
  65.     <!-- 表单 -->
  66.     <div class="form_wrap">
  67.       <form>
  68.         <div class="mb-3">
  69.           <label for="username" class="form-label">账号名</label>
  70.           <input type="text" class="form-control username">
  71.         </div>
  72.         <div class="mb-3">
  73.           <label for="password" class="form-label">密码</label>
  74.           <input type="password" class="form-control password">
  75.         </div>
  76.         <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
  77.       </form>
  78.     </div>
  79.   </div>
  80.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  81.   <script>
  82.     // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
  83.     // 目标2：使用提示框，反馈提示消息
  84.     // 2.1 获取提示框
  85.     const myAlert = document.querySelector('.alert')
  86.     /**
  87.      * 2.2 封装提示框函数，重复调用，满足提示需求
  88.      * 功能：
  89.      * 1. 显示提示框
  90.      * 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
  91.      * 3. 过2秒后，让提示框自动消失
  92.     */
  93.     function alertFn(msg, isSuccess) {
  94.       // 1> 显示提示框
  95.       myAlert.classList.add('show')
  96.  
  97.       // 2> 实现细节
  98.       myAlert.innerText = msg
  99.       const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
  100.       myAlert.classList.add(bgStyle)
  101.  
  102.       // 3> 过2秒隐藏
  103.       setTimeout(() => {
  104.         myAlert.classList.remove('show')
  105.         // 提示：避免类名冲突，重置背景色
  106.         myAlert.classList.remove(bgStyle)
  107.       }, 2000)
  108.     }
  109.     
  110.     // 1.1 登录-点击事件
  111.     document.querySelector('.btn-login').addEventListener('click', () => {
  112.       // 1.2 获取用户名和密码
  113.       const username = document.querySelector('.username').value
  114.       const password = document.querySelector('.password').value
  115.       // console.log(username, password)
  116.  
  117.       // 1.3 判断长度
  118.       if (username.length < 8) {
  119.         alertFn('用户名必须大于等于8位', false)
  120.         console.log('用户名必须大于等于8位')
  121.         return // 阻止代码继续执行
  122.       }
  123.       if (password.length < 6) {
  124.         alertFn('密码必须大于等于6位', false)
  125.         console.log('密码必须大于等于6位')
  126.         return // 阻止代码继续执行
  127.       }
  128.  
  129.       // 1.4 基于axios提交用户名和密码
  130.       // console.log('提交数据到服务器')
  131.       axios({
  132.         url: 'http://hmajax.itheima.net/api/login',
  133.         method: 'POST',
  134.         data: {
  135.           username,
  136.           password
  137.         }
  138.       }).then(result => {
  139.         alertFn(result.data.message, true)
  140.         console.log(result)
  141.         console.log(result.data.message)
  142.       }).catch(error => {
  143.         alertFn(error.response.data.message, false)
  144.         console.log(error)
  145.         console.log(error.response.data.message)
  146.       })
  147.     })
  148.   </script>
  149. </body>
  150.  
  151. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/104494?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号