注册登录js、php、ajax前后端数据交互使用

注册登录js、php、ajax前后端数据交互使用

引用 js文件：

ajax.js（这里用postsend函数）

function getSend(url,cb){
    var xhr=new XMLHttpRequest();
    xhr.open('get',url);
    xhr.onload=function(){
        cb(xhr.responseText)
    };
    xhr.send(null);
}


function postSend(url,cb,date){
    var xhr=new XMLHttpRequest();
    xhr.open('post',url);
    xhr.onload=function(){
        cb(xhr.responseText)
    };
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send(date)
}

public.js(验证码需要)

function rand(min,max){
	//该方法返回一个min和max之间的随机数:200-600
	return Math.floor(Math.random()*(max-min+1)+min);
	
}

cookie.js(登录页面用到)

/* 
    函数名:setCookie
    功能:可以设置指定过期时间的cookie
    参数:
        key:要设置的cookie的键
        value:要设置的cookie的值
        expires:几天以后如果,如传入的是1,表示1天以后过期

*/

function setCookie(key,value,expires){
    var time=new Date()
    time.setTime(time.getTime()-8*60*60*1000+expires*24*60*60*1000);
    document.cookie=key+"="+value+";expires="+time;
}

/* 
    函数名:removeCookie
    功能:可以删除指定的cookie
    参数:
        key:要删除cookie的键

*/
function removeCookie(key){
    setCookie(key,1,-1);
}


/* 
    函数名:getCookie
    功能:可以获取指定条目的cookie值,比如:cookie有两条,分别是a=23;b=45,我可以指定获取a或者是b的值
    参数:
        key:要获取的cookie的键   
    返回值:
        指定的cookie的值

*/

function getCookie(key){
    var str=document.cookie;
    var cookieArr=str.split("; ");
    for(var i=0;i<cookieArr.length;i++){
        var newArr=cookieArr[i].split("=");
        if(key==newArr[0]){
            return newArr[1]
        }    
    }
}

注册页面：

<script>
    var box1=document.getElementsByClassName('box1')[0];
    var un=document.getElementById('un')
    var mm=document.getElementById('mm')
    var form=document.getElementsByTagName('form')[0];
    //点击上传数据到数据库进行判断
    form.onsubmit=function(e){
        var username=un.value;
        var password=mm.value;
        e=window.event||e;
        e.preventDefault?e.preventDefault():e.returnValue=false;
        //判断验证码是否正确
        if(ma.value==yz.innerHTML){
            postSend('./php/zhuche.php',function(res){
                console.log(res)
                //判断数据库中是否已经注册
                if(res=="false"){
                    box1.innerHTML="用户名已存在!";
                }else{
                    box1.innerHTML=res;
                }
            },`un=${username}&mm=${password}`)
        }else{
            box1.innerHTML="验证码输入错误"
        }
    }
    //验证码随机
    var ma=document.getElementsByClassName('ma')[0];
    var yz=document.getElementsByClassName('yz')[0];
    var qh=document.getElementById('qh');
    yz.innerHTML=rand(1000,9999);
    ma.onclick=function(){
        yz.style.display='inline-block';
    }
    qh.onclick=function(){
        yz.innerHTML=rand(1000,9999)
    }
    //跳转登录
    var login=document.getElementById('login');
    login.onclick=function(){
        window.location.href="./login.html"
    }
    </script>

zhuche.php文件：

<?php
    include "./chinese.php";
    $username=$_POST['un'];
    $password=$_POST['mm'];
    $conn=mysqli_connect('localhost','root','root','music');
    $sql="SELECT*FROM `user` WHERE `username`='$username'";
    $res=mysqli_query($conn,$sql);
    $row=mysqli_fetch_assoc($res);
    mysqli_close($conn);
    if($row){
        echo "false";
    }else{
        echo "注册成功!";
        $conn1=mysqli_connect('localhost','root','root','music');
        $sql1="INSERT INTO `user` VALUES(null,'$username','$password')";
        $res1=mysqli_query($conn1,$sql1);
        mysqli_close($conn1);
    }
?>

登录页面：

    <script>
        var box1=document.getElementsByClassName('box1')[0];
        var un=document.getElementById('un')
        var mm=document.getElementById('mm')
        var form=document.getElementsByTagName('form')[0];
        form.onsubmit=function(e){
            var username=un.value;
            var password=mm.value;
            e=window.event||e;
            e.preventDefault?e.preventDefault():e.returnValue=false;
            if(ma.value==yz.innerHTML){
                postSend('./php/login.php',function(res){
                    if(res=="true"){
                        window.location.href="./index.html";
                        setCookie('username',username,7)
                    }else{
                        box1.innerHTML=res;
                    }
                },`un=${username}&mm=${password}`)
            }else{
                box1.innerHTML="验证码输入错误"
            }
        }
        //验证码随机
        var ma=document.getElementsByClassName('ma')[0];
        var yz=document.getElementsByClassName('yz')[0];
        var qh=document.getElementById('qh');
        yz.innerHTML=rand(1000,9999);
        ma.onclick=function(){
            yz.style.display='inline-block';
        }
        qh.onclick=function(){
            yz.innerHTML=rand(1000,9999)
        }
        //跳转注册
        var zhuche=document.getElementById('zhuche');
        zhuche.onclick=function(){
            window.location.href="./zhuche.html"
        }
    </script>

login.php文件：

<?php
    //后端到数据库里找是否存在用户和密码
    include "./chinese.php";
    $username=$_POST['un'];
    $password=$_POST['mm'];
    $conn=mysqli_connect('localhost','root','root','music');
    $sql="SELECT*FROM `user` WHERE `username`='$username' AND `password`='$password'";
    $res=mysqli_query($conn,$sql);
    $row=mysqli_fetch_assoc($res);
    mysqli_close($conn);
    if($row){
        echo "true";
    }else{
        echo "用户名或密码错误";
    }
    
?>

注：本文为本人做项目时总结出来，文中有部分文件，如(chinese.php及html文件没有)，可能不能直接使用，只有注册登录的思想，不懂可以评论问我，随时为你解答。