当前位置：首页 > article >正文

一个简洁的ajax注册登录找回密码切换的前端页面

article 2024/11/30 8:52:27

成功和失败不同颜色显示，纯原生代码不需要jq等第三方插件

<%@ Language="VBScript" CodePage="65001"%>
<%
Response.Charset = "UTF-8"
Session.CodePage = "65001"
Response.Addheader "Content-Type","text/html; charset=utf-8"
'On Error Resume Next
if Request("act")<>"" then
if Request("act")="login" then
username = Request.Form("username")
password = Request.Form("password")
If username = "testuser" And password = "testpassword" Then '账号密码看这里
response.ContentType = "application/json"
response.Write "{ ""success"": true, ""message"": ""登录成功"" }"
Else
response.ContentType = "application/json"
response.Write "{ ""success"": false, ""message"": ""用户名或密码错误"" }"
End If
end if
if Request("act")="register" then
username = Request.Form("username")
password = Request.Form("password")
' 模拟注册逻辑，这里简单返回成功（实际中要插入数据到真实数据库等操作）
response.ContentType = "application/json"
response.Write "{ ""success"": true, ""message"": ""注册成功"" }"
end if
if Request("act")="forgot-password" then
username = Request.Form("username")
email = Request.Form("email")
' 模拟找回密码逻辑，这里简单返回成功（实际中可能涉及发送邮件等复杂操作）
response.ContentType = "application/json"
response.Write "{ ""success"": true, ""message"": ""找回密码邮件已发送，请查收"" }"
end if
response.End
end if
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册登录找回密码页面</title>
<style>
.page-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}
/* 切换按钮样式 */
.tab-container {
display: flex;
justify-content: space-around;
width: 300px;
margin-bottom: -3px;
}
.tab {
padding: 10px;
border: 1px solid #3499d9;
background-color: #3499d9;
cursor: pointer;
}
.tab.active {
background-color: #0180cf;
color: white;
}
/* 内容区域通用样式 */
.content-container {
width: 300px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 20px;
}
.section {
display: none;
}
.section.active {
display: block;
}
/* 输入框样式 */
input {
width: 100%;
padding: 10px 0;
margin-bottom: 15px;
border: 1px solid #3499d9;
border-radius: 5px;
}
/* 按钮样式 */
button {
width: 100%;
padding: 10px;
background-color: #0180cf;
color: white;
border: 1px solid #0180cf;
border-radius: 5px;
cursor: pointer;
}
/* 错误消息样式 */
.error-message {
color: white;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
}
.error-message.red {
background-color: red;
}
.error-message.blue {
background-color: green;
}
</style>
<script>
// 页面加载完成后执行
window.onload = function () {
// 获取所有切换按钮
const tabs = document.querySelectorAll('.tab');
// 获取所有内容区域
const sections = document.querySelectorAll('.section');
// 给切换按钮添加点击事件
tabs.forEach(tab => {
tab.addEventListener('click', function () {
// 移除所有按钮的active类
tabs.forEach(t => t.classList.remove('active'));
// 给当前点击的按钮添加active类
this.classList.add('active');
// 隐藏所有内容区域
sections.forEach(section => section.classList.remove('active'));
// 显示对应目标的内容区域
const targetId = this.dataset.target;
const targetSection = document.getElementById(targetId);
targetSection.classList.add('active');
});
});
// 获取登录按钮并添加点击事件
const loginButton = document.getElementById('login-button');
loginButton.addEventListener('click', function () {
const username = document.getElementById('login-username').value;
const password = document.getElementById('login-password').value;
// 创建Ajax请求对象（这里使用XMLHttpRequest，现代项目也可考虑使用fetch API）
const xhr = new XMLHttpRequest();
xhr.open('POST', '?act=login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
//window.location.href = 'index.html';
const errorMessageDiv = document.getElementById('login-error-message');
errorMessageDiv.textContent = response.message;
errorMessageDiv.classList.add('blue');
} else {
// 显示错误消息，红色背景白色字
const errorMessageDiv = document.getElementById('login-error-message');
errorMessageDiv.textContent = response.message;
errorMessageDiv.classList.add('red');
}
}
};
// 发送请求数据，根据后端接收参数格式调整
xhr.send(`username=${username}&password=${password}`);
});
// 获取注册按钮并添加点击事件
const registerButton = document.getElementById('register-button');
registerButton.addEventListener('click', function () {
const username = document.getElementById('register-username').value;
const password = document.getElementById('register-password').value;
const confirmPassword = document.getElementById('register-confirm-password').value;
// 简单验证密码是否一致，实际中可加强验证逻辑
if (password!== confirmPassword) {
const errorMessageDiv = document.getElementById('register-error-message');
errorMessageDiv.textContent = '两次密码不一致';
errorMessageDiv.classList.add('red');
return;
}
// 创建Ajax请求对象
const xhr = new XMLHttpRequest();
xhr.open('POST', '?act=register', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
// 注册成功，显示蓝色背景白色字提示
const errorMessageDiv = document.getElementById('register-error-message');
errorMessageDiv.textContent = response.message;
errorMessageDiv.classList.add('blue');
} else {
// 显示错误消息，红色背景白色字
const errorMessageDiv = document.getElementById('register-error-message');
errorMessageDiv.textContent = response.message;
errorMessageDiv.classList.add('red');
}
}
};
// 发送请求数据
xhr.send(`username=${username}&password=${password}`);
});
// 获取找回密码按钮并添加点击事件
const forgotButton = document.getElementById('forgot-button');
forgotButton.addEventListener('click', function () {
const username = document.getElementById('forgot-username').value;
const email = document.getElementById('forgot-email').value;
// 创建Ajax请求对象
const xhr = new XMLHttpRequest();
xhr.open('POST', '?act=forgot-password', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
// 找回密码成功，显示蓝色背景白色字提示
const errorMessageDiv = document.getElementById('forgot-error-message');
errorMessageDiv.textContent = response.message;
errorMessageDiv.classList.add('blue');
} else {
// 显示错误消息，红色背景白色字
const errorMessageDiv = document.getElementById('forgot-error-message');
errorMessageDiv.textContent = response.message;
errorMessageDiv.classList.add('red');
}
}
};
// 发送请求数据
xhr.send(`username=${username}&email=${email}`);
});
};
</script>
</head>
<body>
<div class="page-container">
<div class="tab-container">
<button class="tab active" data-target="login-section">登录</button>
<button class="tab" data-target="register-section">注册</button>
<button class="tab" data-target="forgot-password-section">找回密码</button>
</div>
<div class="content-container">
<!-- 登录部分 -->
<div class="section active" id="login-section">
<h2>登录</h2>
<input type="text" id="login-username" placeholder="用户名">
<input type="password" id="login-password" placeholder="密码">
<button id="login-button">登录</button>
<div id="login-error-message" class="error-message"></div>
</div>
<!-- 注册部分 -->
<div class="section" id="register-section" style="display: ;">
<h2>注册</h2>
<input type="text" id="register-username" placeholder="用户名">
<input type="password" id="register-password" placeholder="密码">
<input type="password" id="register-confirm-password" placeholder="确认密码">
<button id="register-button">注册</button>
<div id="register-error-message" class="error-message"></div>
</div>
<!-- 找回密码部分 -->
<div class="section" id="forgot-password-section" style="display: ;">
<h2>找回密码</h2>
<input type="text" id="forgot-username" placeholder="用户名">
<input type="email" id="forgot-email" placeholder="邮箱地址">
<button id="forgot-button">找回密码</button>
<div id="forgot-error-message" class="error-message"></div>
</div>
</div>
</div>
</body>
</html>

查看全文

http://www.kler.cn/a/415392.html