ajax php注册登录页面,用AJAX实现页面登陆以及注册用户名验证的简单实例
时间: 2024-02-21 12:01:48 浏览: 32
好的,下面是一个基于 AJAX 和 PHP 的注册登录页面的简单实例:
1. HTML 页面
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX PHP Register/Login Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// 注册表单提交
$(document).on('submit', '#register-form', function(e){
e.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
var confirmPassword = $('#confirm-password').val();
$.ajax({
type: 'POST',
url: 'register.php',
data: {username: username, password: password, confirm_password: confirmPassword},
dataType: 'json',
success: function(response){
if(response.success){
alert('注册成功!');
}else{
alert(response.error);
}
}
});
});
// 登录表单提交
$(document).on('submit', '#login-form', function(e){
e.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type: 'POST',
url: 'login.php',
data: {username: username, password: password},
dataType: 'json',
success: function(response){
if(response.success){
alert('登录成功!');
}else{
alert(response.error);
}
}
});
});
// 用户名验证
$(document).on('blur', '#username', function(){
var username = $(this).val();
$.ajax({
type: 'POST',
url: 'check_username.php',
data: {username: username},
dataType: 'json',
success: function(response){
if(!response.success){
alert(response.error);
}
}
});
});
</script>
</head>
<body>
<h2>注册</h2>
<form id="register-form">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm_password" required>
</div>
<button type="submit">注册</button>
</form>
<h2>登录</h2>
<form id="login-form">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">登录</button>
</form>
</body>
</html>
```
2. PHP 后端代码
- `register.php`
```php
<?php
// 获取提交的数据
$username = $_POST['username'];
$password = $_POST['password'];
$confirmPassword = $_POST['confirm_password'];
// 校验数据
if(empty($username) || empty($password) || empty($confirmPassword)){
die(json_encode(['success' => false, 'error' => '用户名或密码不能为空']));
}
if($password !== $confirmPassword){
die(json_encode(['success' => false, 'error' => '两次输入的密码不一致']));
}
// 此处省略数据库操作,假设注册成功
echo json_encode(['success' => true]);
```
- `login.php`
```php
<?php
// 获取提交的数据
$username = $_POST['username'];
$password = $_POST['password'];
// 此处省略数据库操作,假设登录成功
echo json_encode(['success' => true]);
```
- `check_username.php`
```php
<?php
// 获取提交的数据
$username = $_POST['username'];
// 此处省略数据库操作,假设用户名已存在
echo json_encode(['success' => false, 'error' => '用户名已存在']);
```
以上代码仅供参考,实际开发中需要根据具体需求进行适当修改。