用户登录+插件使用(基础)

<!DOCTYPE html>

<html lang="en">

<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>用户登录+插件使用</title>

<!-- 引入bootstrap.css -->

<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 class="login-form">

<div class="mb-3">

<label for="username" class="form-label">账号名</label>

<input type="text" class="form-control username" name="username">

</div>

<div class="mb-3">

<label for="password" class="form-label">密码</label>

<input type="password" class="form-control password" name="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>

<!-- 3.1 引入插件 -->

<script src="./lib/form-serialize.js"></script>

<script>

// 目标1:点击登录时,用户名和密码长度判断,并提交数据和服务器通信

// 目标2:使用提示框,反馈提示消息

// 目标3:使用form-serialize插件,收集用户名和密码

// 2.1 获取提示框

const myAlert = document.querySelector('.alert')

/**2.2 封装提示框函数,重复调用,满足提示需求

* 功能:

* 1. 显示提示框

* 2. 不同提示文字msg,和成功绿色失败红色isSuccess(true成功,false失败)

* 3. 过2秒后,让提示框自动消失

*/

function alertFn(msg, isSuccess) {

// 1> 显示提示框

myAlert.classList.add('show')

// 2> 实现细节

myAlert.innerText = msg

const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'

myAlert.classList.add(bgStyle)

// 3> 过2秒隐藏

setTimeout(() => {

myAlert.classList.remove('show')

// 提示:避免类名冲突,重置背景色

myAlert.classList.remove(bgStyle)

}, 2000)

}

// 1.1 登录-点击事件

document.querySelector('.btn-login').addEventListener('click', () => {

// 3.2 使用serialize函数,收集登录表单里用户名和密码

const form = document.querySelector('.login-form')

const data = serialize(form, { hash: true, empty: true })

console.log(data)

// {username: 'itheima007', password: '7654321'}

const { username, password } = data

// 1.2 获取用户名和密码

// const username = document.querySelector('.username').value

// const password = document.querySelector('.password').value

console.log(username, password)

// 1.3 判断长度

if (username.length < 8) {

alertFn('用户名必须大于等于8位', false)

console.log('用户名必须大于等于8位')

return // 阻止代码继续执行

}

if (password.length < 6) {

alertFn('密码必须大于等于6位', false)

console.log('密码必须大于等于6位')

return // 阻止代码继续执行

}

// 1.4 基于axios提交用户名和密码

// console.log('提交数据到服务器')

axios({

url: 'http://hmajax.itheima.net/api/login',

method: 'POST',

data: {

username,

password

}

}).then(result => {

alertFn(result.data.message, true)

console.log(result)

console.log(result.data.message)

}).catch(error => {

alertFn(error.response.data.message, false)

console.log(error)

console.log(error.response.data.message)

})

})

</script>

</body>

</html>

相关推荐
cg501720 小时前
AJAX 技术
前端·javascript·ajax
白仑色20 小时前
AJAX 入门到精通
前端·javascript·ajax·okhttp·web开发·前端开发
草履虫建模3 天前
Ajax原理、用法与经典代码实例
java·前端·javascript·ajax·intellij-idea
梁辰兴4 天前
企业培训笔记:axios 发送 ajax 请求
前端·笔记·ajax·vue·axios·node
凌辰揽月5 天前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
生产队队长6 天前
Tomcat问题:启动脚本startup.bat中文乱码问题解决
java·ajax·tomcat
AA-代码批发V哥6 天前
Axios之核心语法详解
ajax
嘉琪0017 天前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
AA-代码批发V哥8 天前
Ajax之核心语法详解
ajax
PythonicCC9 天前
Django核心知识点详解:JSON、AJAX、Cookie、Session与用户认证
ajax·django·json