php结合ajax进行用户注册登录验证

思路:
将从前端页面获取到的用户名和密码存到ajax发送请求的url中,后端通过url中所携带的数据信息进行验证。

我将注册和登录的php文件合并成一个文件,在注册、登录页面中的ajax发送请求的url中设置了flag,来判断php中执行注册功能还是登录验证功能,注册页面中flag=register,登录页面中flag= login。

1、注册页面代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <p>用户名:<input type="text" id="uname"/></p>
    <p>密  码:<input type="password" id="upwd"/></p>
    <p id="info"></p>
    <input type="submit" value="注册" id="btn">
</body>
</html>
<script>
    var uName = document.getElementById("uname");
    var uPwd = document.getElementById("upwd");
    var info = document.getElementById("info");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        var sName = uName.value;
        var sPwd = uPwd.value;
        if(sName == "" || sPwd == ""){
            return
        }
        var xhr = new XMLHttpRequest();
        xhr.open("get","together.php?flag=register&uname="+sName+"&upwd="+sPwd,true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var res = xhr.responseText;
                if(res == 1){
                    info.innerHTML = "登陆成功";
                    window.location.href = "login.html";
                }else if(res == 2){
                    info.innerHTML = "注册失败";
                }else{
                    info.innerHTML = "用户名已存在,请重新注册";
                }
            }
        }
    }
</script>

注意**:
注册页面中ajax的请求路径,flag为register,带着从前端页面获取的具体的数据信息,向后端数据库发送请求,存入成功后跳转到登录页面。

2、登录页面如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <p>用户名:<input type="text" id="uname"/></p>
    <p>密  码:<input type="password" id="upwd"/></p>
    <p id="info"></p>
    <input type="submit" value="登录" id="btn">
</body>
</html>
<script>
    var uName = document.getElementById("uname");
    var uPwd = document.getElementById("upwd");
    var info = document.getElementById("info");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        var sName = uName.value;
        var sPwd = uPwd.value;
        if(sName == "" || sPwd == ""){
            return
        }
        var xhr = new XMLHttpRequest();
        xhr.open("get","together.php?flag=login&uname="+sName+"&upwd="+sPwd,true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var res = xhr.responseText;
                if(res == 1){
                    info.innerHTML = "登陆成功";
                    window.location.href = "index.html";
                }else if(res == 2){
                    info.innerHTML = "密码不正确";
                }else{
                    info.innerHTML = "用户名不存在,请重新输入";
                }
            }
        }
    }
</script>

注意**:
登录页面中ajax的请求路径,flag为login,也带着从前端获取的具体的数据信息,向后端发送验证请求,验证成功后跳转到首页index.html。

3、php执行程序如下:

<?php
	header("content-type:text/html;charset=utf-8");
	$uname = $_GET["uname"];
	$upwd = $_GET["upwd"];
	$flag = $_GET["flag"];
	mysql_connect("127.0.0.1","root","root");
	mysql_select_db("1127");
	mysql_query("set names utf8");
	$sql = "select * from `user` WHERE uname='$uname'";
	$res = mysql_query($sql);
	$arr = mysql_fetch_assoc($res);
	if($flag == "register"){   //当传入的路径告诉你是注册页面时进行以下判断
	    if($arr){        //如果用户名已存在则不能再次注册
	        echo 0;    
	    }else{       //如果不存在,则可以注册
	        $sql = "insert into `user` (uname,upwd) values ('$uname','$upwd')";
	        $res = mysql_query($sql);
	        if($res){
	            echo 1;
	        }else{
	            echo 2;
	        }
	    }
	}else if($flag == "login"){       //当传入的路径告诉你是登录页面时进行以下判断
	    if($arr){     //如果用户名已存在则继续判断密码是否对应
	        if($upwd == $arr["upwd"]){    
	            echo 1;
	        }else{
	            echo 2;
	        }
	    }else{
	        echo 0;
	    }
	}
?>
  • 1
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值