php+mysql+ajax实现用户登录注册demo(单页面刷新无美化)

创建三个php文件

user.php
login.php
register.php

创建数据库数据表

create database student;

use student;

create table stu(
	id int auto_increment primary key,
    name char(8),
    password char(16)
);

具体实现代码

user.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>

<body>
    <form action="" method="post">
        用户名：<input type="text" name="username" id="username"><br>
        密码: <input type="password" name="pass" id="pass"><br>
        <p id="slot"></p>
        <input type="submit" id="register" value="注册">/<input type="submit" id="login" value="登录">
    </form>

	<!-- 引入jquery CDN  -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(function () {
            $("#login").click(function () {
                var $username = $("#username").val(),
                    $pass = $("#pass").val();
                if ($username == '' || $pass == '') {
                    $("#slot").text("用户名或密码不能为空");
                    return false;
                } else {
                    var datas = {
                        username: $username,
                        pass: $pass
                    };
                    $.ajax({
                        url: 'user.php',
                        type: 'post',
                        dataType: 'json',
                        data: datas,
                        success: function (result) {
                            if (result == 'nameerror') {
                                $("#slot").text("用户名不存在");
                            } else if (result == "passerror") {
                                $("#slot").text("密码错误");
                            } else if (result == 'success') {
                                $("#slot").text("登录成功");
                            }
                        },
                        error: function (e) {
                            $("#slot").text("获取失败");
                        }
                    })
                } return false;
            })
            $("#register").click(function () {
                var $username = $("#username").val(),
                    $pass = $("#pass").val();
                if ($username == '' || $pass == '') {
                    $("#slot").text("用户名及密码不能为空");
                    return false;
                } else {
                    var datas = {
                        username: $username,
                        pass: $pass
                    }
                    $.ajax({
                        url: 'register.php',
                        type: 'post',
                        data: datas,
                        dataType: 'json',
                        success: function (reslut) {
                            if (reslut == "repeat") {
                                $("#slot").text("该用户名已存在");
                            } else if (reslut == 'success') {
                                alert("注册成功");
                                $("#username").val($username);
                                $("#pass").val($pass);
                            }
                            else {
                                $("#slot").text("获取失败");
                            }
                        }
                    })
                } return false;
            })
        })
    </script>
</body>

</html>

<?php 
    @header("content-type:text/html;charset=utf8");
    $username = $_REQUEST['username'];
    $pass = $_REQUEST['pass'];
    $link = mysql_connect('localhost','root','');
    if (!$link) { 
        die('数据库连接失败'. mysql_error()); 
    } 
    mysql_query('set names utf8');
    mysql_select_db('student',$link);

    $arrays = array(array('one'=>'nameerror','two'=>'passerror','three'=>'success'));
    $sqlname = mysql_query("select count(*) from stu where name= '$username'");
    $row = mysql_fetch_row($sqlname);
    $num = $row[0];
    //查看用户是否存在
    if(!$num){
        //不存在返回nameerror
        echo json_encode($arrays[0]['one']);
        return;
    }else{
        $sqlpass = mysql_query("select password from stu where name='$username'");
        $passarray = mysql_fetch_row($sqlpass);//获得密码数组
        $passval = $passarray[0];//这里才是对应用户的密码
        //判断该用户的密码是否正确
        if($passval!=$pass){
            echo json_encode($arrays[0]['two']);
            return;
        }
    }
    //成功返回success
    echo json_encode($arrays[0]['three']);
    mysql_close($link); 
 ?>

<?php
    @header("content-type:text/html;charset=uft8");
    $conne = mysql_connect("localhost","root","");
    if (!$conne) { 
        die('数据库连接失败'. mysql_error()); 
    } 
    $select = mysql_select_db("student",$conne);
    $utf = mysql_query("set names utf8");

    $username= $_REQUEST['username'];
    $pass = $_REQUEST['pass'];
    $arrays = array(array("one"=>'repeat','two'=>'success'));
    $sql  = mysql_query("select count(*) from stu where name='$username'");
    $row = mysql_fetch_row($sql);
    $num = $row[0];
    //判断用户名是否已经被注册了
    if($num == 1){
        //被注册返回repeat
        echo json_encode($arrays[0]['one']);
    }else{
        mysql_query("insert into stu(name,password) values('{$username}','{$pass}')");
        echo json_encode($arrays[0]['two']);
    }
?>

文章作者: Lhl

文章链接: https://lhl-cpu.github.io/2019/08/27/php+mysql+ajax%E5%AE%9E%E7%8E%B0%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C/

ajax jquery mysql php

打赏

微信
支付宝