AJAX 1 - axios 体验、识别 URL、常用请求方法、HTTP 协议、错误处理、表单序列化插件

最编程 2024-10-05 08:15:02

...

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>12.案例_登录_提示消息</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">  <style> html, body { background-color: #EDF0F5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .container { width: 520px; height: 540px; background-color: #fff; padding: 60px; box-sizing: border-box; } .container h3 { font-weight: 900; } </style>  <style> .form_wrap { color: #8B929D !important; } .form-text { color: #8B929D !important; } </style>  <style> .alert { transition: .5s; opacity: 0; } .alert.show { opacity: 1; } </style> </head> <body> <div class="container"> <h3>欢迎-登录</h3>  <div class="alert alert-success" role="alert"> 提示消息 </div>  <div class="form_wrap"> <form> <div class="mb-3"> <label for="username" class="form-label">账号名</label> <input type="text" class="form-control username"> </div> <div class="mb-3"> <label for="password" class="form-label">密码</label> <input type="password" class="form-control password"> </div> <button type="button" class="btn btn-primary btn-login"> 登录 </button> </form> </div> </div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信 // 目标2：使用提示框，反馈提示消息 //获取提示框 //功能： //1.显示提示框 //2.不同提示文字，成功绿色不成功红色 //3.两秒后自动消失 const myAlert = document.querySelector('.alert') function alertFn(isSuccess, msg) { myAlert.classList.add('show') myAlert.innerHTML = msg const bgStyle = isSuccess ? 'alert-success' : 'alert-danger' myAlert.classList.add(bgStyle) setTimeout(() => { myAlert.classList.remove('show') //重置背景色 myAlert.classList.remove(bgStyle) }, 2000) } // 1.1 登录-点击事件 document.querySelector('.btn-login').addEventListener('click', () => { // 1.2 获取用户名和密码 const username = document.querySelector('.username').value const password = document.querySelector('.password').value // console.log(username, password) // 1.3 判断长度 if (username.length < 8) { console.log('用户名必须大于等于8位') alertFn(false, '用户名必须大于等于8位') return // 阻止代码继续执行 } if (password.length < 6) { console.log('密码必须大于等于6位') alertFn(false, '密码必须大于等于6位') return // 阻止代码继续执行 } // 1.4 基于axios提交用户名和密码 // console.log('提交数据到服务器') axios({ url: 'http://hmajax.itheima.net/api/login', method: 'POST', data: { username, password } }).then(result => { console.log(result) console.log(result.data.message) alertFn(true, '登陆成功') }).catch(error => { console.log(error) console.log(error.response.data.message) alertFn(false, '用户名或密码不正确') }) }) </script> </body> </html>

上一篇：微信原生小程序

下一篇： STL 中的 Priority_queue - 深入分析 C++ 中优先队列的实现原理、核心功能和基本机制。