jquery登录注册页面代码
时间: 2023-08-06 12:22:38 浏览: 76
以下是一个简单的 jQuery 登录注册页面代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Register Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="login-form">
<h1>Login</h1>
<form id="login-form">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
<div class="register-form">
<h1>Register</h1>
<form id="register-form">
<input type="text" name="username" placeholder="Username">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<button type="submit">Register</button>
</form>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form, .register-form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
padding: 20px;
width: 400px;
}
.login-form h1, .register-form h1 {
margin-top: 0;
}
.register-form {
display: none;
}
.register-form.show {
display: block;
}
```
jQuery 代码:
```javascript
$(document).ready(function() {
// 切换登录和注册表单
$('.login-form form').on('click', 'button[type="button"]', function() {
$('.login-form').hide();
$('.register-form').addClass('show');
});
$('.register-form form').on('click', 'button[type="button"]', function() {
$('.register-form').removeClass('show');
$('.login-form').show();
});
// 登录表单提交
$('#login-form').on('submit', function(event) {
event.preventDefault();
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val();
// 发送 AJAX 请求,验证用户信息
$.ajax({
url: 'login.php',
type: 'POST',
data: {
username: username,
password: password
},
success: function(data) {
if (data == 'success') {
// 登录成功,跳转到首页
window.location.href = 'index.php';
} else {
alert('登录失败,请检查用户名和密码!');
}
},
error: function() {
alert('登录失败,请稍后重试!');
}
});
});
// 注册表单提交
$('#register-form').on('submit', function(event) {
event.preventDefault();
var username = $('input[name="username"]').val();
var email = $('input[name="email"]').val();
var password = $('input[name="password"]').val();
// 发送 AJAX 请求,注册新用户
$.ajax({
url: 'register.php',
type: 'POST',
data: {
username: username,
email: email,
password: password
},
success: function(data) {
if (data == 'success') {
// 注册成功,跳转到登录页面
$('.register-form').removeClass('show');
$('.login-form').show();
alert('注册成功,请登录!');
} else {
alert('注册失败,请稍后重试!');
}
},
error: function() {
alert('注册失败,请稍后重试!');
}
});
});
});
```
注意:以上代码仅为示例,实际应用中需要根据具体情况进行修改和完善。另外,前端代码中的用户名和密码不应该明文传输,应该使用 HTTPS 协议或其他加密方式保护用户隐私。