与php的数据交互通过ajax完成，提交信息不会刷新页面
如果想要直接与php交互数据，可以省去JavaScript部分
先上几个图
登录界面：
注册界面
注册成功，会有一个注册信息的弹窗
登录界面，同样也有个弹窗
如果用不存在的账号登录或者密码错误，会简单进行一个错误提示
下面是代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="root">
<div id="mainlogin" class="main">
<div class="inputbox">
<div class="username">
<span>用户名：</span>
<input id="login_uname" class="uname" type="text" name=‘login_username‘
placeholder="请输入用户名"><br><br>
</div>
<div class="password">
<span>密 码：</span>
<input id="login_pwd" class="pwd" type="password" name=‘login_password‘ placeholder="请输入密码">
</div>
</div>
<!-- 登录 -->
<div id="logincontent" class="btnbox">
<div class="btn">
<button id="loginbtn" class="button">登 录</button>
</div>
<div class="tohref">
<span>没有账号？</span><a id="toregist" class="href" href="javascript:;">点击去注册</a>
</div>
</div>
<!-- 注册 -->
<div id="registcontent" class="btnbox active">
<div class="btn">
<button id="registbtn" class="button">注 册</button>
</div>
<div class="tohref">
<a id="tologin" class="href" href="javascript:;">去登录</a>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS
a{
text-decoration: none;
}
span{
cursor: default;
}
.root{
text-align: center;
}
.main{
width: 400px;
height: 300px;
background:#2eafe0;
border: #f9bb48 2px solid;
border-radius:20px;
position: relative;
margin: 200px auto 0;
}
.username,.password{
font-size: 30px;
color:#b94242;
}
.uname,.pwd{
width: 200px;
height: 40px;
border: #e6ec6f 1px solid;
border-radius: 8px;
font-size: 25px;
}
#registcontent{
position: absolute;
left:100px;
top:152px;
}
#logincontent{
position: absolute;
left:100px;
top:152px;
}
.inputbox{
margin-top: 20px;
}
.btnbox{
margin-top: 30px;
justify-content: space-around;
}
.button{
width: 200px;
height: 45px;
color: #f6f7dc;
background: #e28003;
border: #c7e02e 1px solid;
font-size: 25px;
border-radius:10px;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
}
.tohref{
width: 200px;
height: 20px;
margin-top: 30px;
position: absolute;
left: 0;
top: 40px;
animation: href 1s 2s;
}
.href{
color: #ab2011;
cursor: pointer;
}
.active{
display: none;
}
.animation{
animation: btn 1.5s;
}
@keyframes btn{
0%{
top:-184px ;
}
20%{
top:0 ;
}
40%{
top: -100px;
}
60%{
top: 0;
}
80%{
top: -50px;
}
100%{
top: 0;
}
}
@keyframes href{
0%{
top: 40px;
transform: rotateY(-360deg);
font-size: 20px;
}
100%{
top: 40px;
transform: rotateY(0deg);
font-size: 16px;
}
}
JavaScript
window.onload = function (){
var regist = document.getElementById(‘registbtn‘);
var login = document.getElementById(‘loginbtn‘);
var tologin = document.getElementById(‘tologin‘);
var toregist = document.getElementById(‘toregist‘);
var logincontent = document.getElementById(‘logincontent‘);
var registcontent = document.getElementById(‘registcontent‘);
var loginbtn = document.getElementById(‘loginbtn‘);
var registbtn = document.getElementById(‘registbtn‘);
// 切换到登录按钮
tologin.onclick = function (){
logincontent.className = ‘btnbox‘;
registcontent.className = ‘btnbox active‘;
loginbtn.className = ‘button animation‘;
registbtn.className = ‘button‘;
}
// 切换到注册按钮
toregist.onclick = function (){
logincontent.className = ‘btnbox active‘;
registcontent.className = ‘btnbox‘;
loginbtn.className = ‘button‘;
registbtn.className = ‘button animation‘;
}
// 注册
regist.onclick = function (){
var registname = document.getElementById(‘login_uname‘).value;
var registpwd = document.getElementById(‘login_pwd‘).value;
var type = ‘regist‘;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
xhr.onreadystatechange = function (res){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
}
xhr.open(‘POST‘,‘index.php‘,true);
xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);
xhr.send(‘login_username=‘+registname+‘&login_password=‘+registpwd+‘&type=‘+type);
}
// 登录
login.onclick = function (){
var loginname = document.getElementById(‘login_uname‘).value;
var loginpwd = document.getElementById(‘login_pwd‘).value;
var type = ‘login‘;
// alert(loginname);
// alert(loginpwd);
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
xhr.onreadystatechange = function (res){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
}
xhr.open(‘POST‘,‘index.php‘,true);
xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);
xhr.send(‘login_username=‘+loginname+‘&login_password=‘+loginpwd+‘&type=‘+type);
}
}
PHP
<?php
header(‘Content-type:text/html;charset:utf-8‘);
// 服务器
$server = ‘localhost‘;
// 用户名
$db_username = ‘root‘;
// 密码
$db_password = ‘root‘;
// 连接数据
$con = new mysqli($server,$db_username,$db_password);
// var_dump($con);
// 判断是否连接成功
if($con->connect_error){
die(‘数据库连接失败‘);
}
// 选择数据库
mysqli_select_db($con,‘adopey‘);
// $registName=$_REQUEST[‘regist_username‘];
// $registPassword=$_REQUEST[‘regist_password‘];
$loginName=$_REQUEST[‘login_username‘];
$loginPassword=$_REQUEST[‘login_password‘];
$type=$_REQUEST[‘type‘];
// 注册
if($type==‘regist‘){
// 向表中插入注册信息
$registinfo = "insert into usera (uname,upwd) VALUES(‘$loginName‘,‘$loginPassword‘)";
mysqli_query($con,$registinfo);
// 注册信息
echo ‘注册成功 用户名:‘.$loginName.‘ 密码：‘.$loginPassword;
}
// 注册部分结束
// 登录部分
if($type==‘login‘){
// 检查用户名和密码是否匹配
$check="SELECT * FROM usera WHERE uname=‘$loginName‘ and upwd=‘$loginPassword‘";
$login=mysqli_query($con,$check);//$login是obiect，是mysqli_result类型
// 把结果转换成数字类型，$login里面有个‘num_rows‘，值为0或1
$res=mysqli_num_rows($login);//判断是否为0
if($res){
echo $loginName.‘,您已登陆成功‘;
}else{
echo ‘用户名或密码错误‘;
}
}
// 关闭数据库
mysqli_close($con);
原文地址：https://www.cnblogs.com/zhangcheng001/p/11173364.html
时间： 2024-08-30 04:35:24