PHP/AJAX——登录信息提示（非安全版本）

来自编程技术交流中心(QQ群：167998652)——StarSky_STZG

本文链接： https://blog.csdn.net/weixin_43272781/article/details/102577316

基本概念

AJAX：AJAX引擎其实是一个JavaScript对象，全写是 window.XMLHttpRequest对象，由于浏览器的版本不同，特别是老版本的IE浏览器，虽然也支持AJAX引擎，但是写法上有区别，在IE低版本中通常用 ActiveXObject对象来创建AJAX引擎。 AJAX 来自英文“Asynchronous Javascript And XML” 的缩写，也称为异步JavaScript和XML。简言之，就是一个JS对象，可以实现在网页加载完成以后，不用刷新的情况下与服务器交互。产生极好的用户体验效果。

示例

前端

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>维修预约后台登录_ZSTUCA</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link href="\assets\css\bootstrap.min.css" rel="stylesheet">
        
        <link href=".\assets\css\style.css" rel="stylesheet">
    </head>
<body>
    <div class="container" style="text-align:center">
    <!-- 登录框 -->
        <h1>计算机协会维修部</h1>
        <h2>维修预约后台登录</h2>
		<form class="form-signin" action="check.php" method="post">
			<p><label for="username" class="sr-only" title="用户名">用户名</label>
			<input type="text" id="username"  name="username" class="form-control" placeholder="用户名" required autofocus> </p>
			<p><label for="Password" class="sr-only" title="密码">密码</label>
            <input type="password" id="password" name="password" class="form-control" placeholder="密码" required></p>
            <div style="min-height:25px;"><span id="result"></span></div>
            <p><button class="btn btn-lg btn-primary" type="submit" style="margin:0 50px 0 0 ;">登录</button>
            <button class="btn btn-lg btn-primary" type="reset" style="margin:0 0 0 50px ;">重置</button></p>
        </form>
        <div class="footer">计算机协会维修队</div>
    </div>
<script type="text/javascript">

var username=document.getElementById('username');

//用户名输入框失去焦点时触发
console.log(username);
username.addEventListener('blur',function(){
    console.log("οnblur");
    //主角登场——AJAX引擎的创建及使用详细代码来了

    var ajax=new XMLHttpRequest(); //创建AJAX引擎实例

    //创建GET请求，发送请求时传username值

    ajax.open('GET','check.php?username='+this.value); 

    //当AJAX引擎的状态产生改变时触发onreadystatechange属性指向的函数（多次执行）

    //状态值有5个：0 1 2 3 4 ，其中4表示服务器端响应就绪

    ajax.onreadystatechange=function(){

    //必须在服务器响应就绪，并且HTTP的状态码是200时才接收数据

    //ajax.readyState 获取到服务器响应状态码，必须是4才表示就绪

    //ajax.status 获取到HTTP的状态码，必须是200才表示成功

        if(ajax.readyState==4 && ajax.status==200){

        //ajax.responseText 接收服务器响应回来的内容

        console.log(ajax.responseText);
        console.log(ajax.responseText=='1');
        //接收到服务器响应数据后，AJAX工作已完成，可根据结果显示提示信息

            if(ajax.responseText==1){

            result.innerHTML='恭喜你，可以登录';

            result.style.color='#0a0'; //将字体设置为红色

            }else if(ajax.responseText==2){

            result.innerHTML='请输入用户名';

            result.style.color='#f00'; //将字体设置为红色

            }else{

            result.innerHTML='该用户名不存在，请重新输入';

            result.style.color='#f00'; //将字体设置为绿色

            }

        }

    }

    ajax.send(); //发送请求

});

</script>

</body>

</html>

css

@charset "gb2312";
/* CSS Document */
 body {
            padding-top: 40px;
			padding-bottom: 40px;
			background-color: #eee;
        }
       .form-signin {
		  max-width: 400px;
		  padding: 15px;
		  margin: 0 auto;
		  margin-top: 100px;
		  border-style: solid; 
		  border-width: 3px;
		  border-color: aliceblue;
		  border-radius: 5%;
		  background-color: azure;
		}
		.form-signin p{
			padding: 15px;
			margin: 0 auto;
		}
		.form-signin .form-signin-heading{
			margin-bottom: 10px;
			max-width: auto;
		}
		.form-signin .checkbox {
		  margin-bottom: 10px;
		}
		.form-signin .checkbox {
		  font-weight: normal;
		}
		.form-signin .form-control {
		  position: relative;
		  height: auto;
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
		  padding: 10px;
		  font-size: 16px;
		}
		.form-signin .form-control:focus {
		  z-index: 2;
		}
       .form-reg {
		  max-width: 300px;
		  padding: 15px;
		  margin: 0 auto;
		}
		.form-reg .form-signin-heading{
			max-width: 300px;
			width: 300px;
		}
		.form-reg .checkbox {
		  margin-bottom: 10px;
		}
		.form-reg .checkbox {
		  font-weight: normal;
		}
		.form-reg .form-control {
		  position: relative;
		  height: auto;
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
		  padding: 10px;
		  font-size: 16px;
		}
		.form-reg .form-control:focus {
		  z-index: 2;
		}
		.form-reg input[type="email"] {
		  margin-bottom: -1px;
		  border-bottom-right-radius: 0;
		  border-bottom-left-radius: 0;
		}
		.form-reg input[type="password"] {
		  margin-bottom: 10px;
		  border-top-left-radius: 0;
		  border-top-right-radius: 0;
		}
		.login_lbl {
			visibility: hidden;
		}
		.footer{
			white-space: nowrap;
			vertical-align: middle;
			position: absolute;
			color: white;
			background-color: rgba(0,0,0,0.3);
			left: 0;
			right: 0;
			bottom: 33px;
			margin: auto;
			width: 175px;
			height: 22px;
			line-height: 20px;
			text-align: center;
		}

后端

<?php

function checkdata($username){
    //连接数据库的代码
    include 'conn.php';
    $sql="select ID from wxyy where ID=".$username;
    
    $rs=mysqli_query($connID,$sql);
    
    //将构造好的SQL语句发到服务器上执行
    
    if( mysqli_num_rows($rs) ){
    
        echo '1'; //如果用户名找到有结果，证明该用户名已存在，返回1
    
    }else{
    
        echo '0'; //如果用户名未找到结果，证明该用户名不存在，返回0
    
    }
    //关闭数据库连接，释放结果集
    mysqli_free_result($rs);
    mysqli_close($connID);
}
//服务器端的代码可以使用PHP编写，根据逻辑反馈数据给客户端实现验证功能
if(isset($_GET['username']) and $_GET['username']!=''){
    checkdata($_GET['username']);
}else{
    echo '2';
}
?>

效果

说明

因为每次输入用户名即可返回用户名数据库中是否存在，容易被套取用户数据。

参考文章

https://www.itsource.cn/web/news/5/20170512/1246.html

https://blog.csdn.net/weixin_43272781/article/details/102398525

PHP/AJAX——登录信息提示（非安全版本）

基本概念

示例

效果

说明

参考文章

猜你喜欢