Ajax配合jQuery和数据库_jquery 操纵数据库类-CSDN博客

本文链接：https://blog.csdn.net/weixin_48568848/article/details/125760529

Ajax配合jQuery和MySQL 实现页面局部刷新直接提交到数据库中减轻服务器的负担无需刷新页面，减少用户实际的等待时间话不多说上图和源代码下面是ajax的代码

登录界面HTML代码需要引入booststrap框架

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <script src="js/jq214.js"></script>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/ajax.js"></script>
    <script src="js/yanzhengma.js"></script>

</head>

<body>

    <div class="denglu">
        <form class="zujian">
            <h3>用户登录</h3>
            <div class="form-group">
                <div class="input-group">
                    <!-- <span></span> -->
                    <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" name="user" class="form-control" placeholder="请输入账号" aria-describedby="basic-addon1" id="btn">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock"></span></span>
                    <input type="password" name="password" placeholder="请输入密码" class="form-control" id="btn05" aria-describedby="basic-addon2">
                </div>
            </div>
            <div class="form-group">
                <p align="center"><input type="text" name="code" placeholder="请输入验证码" class="form-control col-lg-4" id="btn04"> <span class="yanzm" id="code"></span><span class="yanzm2 " id="click">看不清换一张</span></p>
            </div>
            <div class="btnan">
                <button id="btn01" onclick="denglu()" class="btn btn-info ">登录</button>&nbsp;<button class="btn btn-info"><a href="zhuce.html ">注册</a></button>
            </div>
        </form>
    </div>
</body>

</html>

登录界面连接数据库代码以及操作数据库代码

<?php
$servername = "localhost";
$username = "root";
$password = "12345678";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
// 中文字符集
mysqli_query($conn, "set names utf8");
header("content-Type:text/html;charset=utf-8");
// 获取数据
$user=$_GET["user"];
$password=$_GET["password"];
setcookie('user',$user,time()+3600*12);
setcookie('password',$password,time()+3600*12);
// echo'您的用户名是'.$_COOKIE['user'];
// echo'您的密码是'.$_COOKIE['password'];
// die();
$sql="select * from `user` where user='$user' and password='$password'";
// die($sql);
$re=$conn->query($sql);
// 判断用户是否存在
if($re->num_rows > 0){
    die('登录成功');
}else{
    die("用户不存在");
}

Ajax代码需要引入jq文件

function denglu() {
    var user = $('#btn').val();
    var password = $('#btn05').val();
    var yzm = $('#btn04').val();
    if (user == '') {
        alert('用户名不能为空')
        $('#btn').foucs()
    } else if (password == '') {
        alert('密码不能为空')
        $('#btn05').foucs()
    } else if (yzm != $('#code').html()) {
        alert('验证码错误')
        $('#btn05').foucs()
    } else {
        $.ajax({
            type: "get",
            url: "php/denglu.php?user=" + user + "&password=" + password,
            dataType: "text",
            success: function(data) {
                if (data == '登录成功') {
                    window.location.href = "liuyan.html"
                } else {
                    alert(data);
                }
            },
            error: function(data) {
                alert("系统出错，请联系开发人员")
            }
        });
    }
}

注册界面HTML代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jq214.js"></script>
    <script src="js/ajax.js"></script>
    <link rel="stylesheet" href="css/register.css">
</head>

<body>
    <div class="bd">
        <div class="ad">
            <dd style="color: white;font-size: 80px;">用科技</dd>
            <dd style="color: white;font-size: 50px;">让复杂的世界更简单</dd>
        </div>
        <form class="zujian">
            <div class="left-top">
                <h3>欢迎注册</h3>
                <p style="font-size: 10px;">已有账号？<span><a href="denglu.html">登录</a></span></p>
            </div>
            <div class="biaodan">
                <table>
                    <tr>
                        <td><span>用户</span></td>
                        <td><input type="text" name="user" id="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr class="jianju">
                        <td><span>密码</span></td>
                        <td><input type="password" name="password" id="password" placeholder="密码"></td>
                    </tr>
                    <tr class="jianju">
                        <td>密码</td>
                        <td><input type="password" name="repassword" id="repassword" placeholder="确认密码" required></td>
                    </tr>
                </table>
                <div class="button">
                    <p alignn="center"> <button class="btn btn-primary btn-lg btn-block" type="submit" id="btn02" onclick="register()">注册</button></p>
                    <span style="font-size: 6px;text-align: center"> <input type="checkbox"> 阅读并接受<a>《百度用户协议》</a>及<a>声明</a></span>
                </div>
            </div>
        </form>
    </div>
</body>

</html>

注册界面php部分

<?php
$servername = "localhost";
$username = "root";
$password = "12345678";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
// 中文字符集
mysqli_query($conn, "set names utf8");
header("content-Type:text/html;charset=utf-8");

// 获取数据
$user = $_GET["user"];
$password = $_GET["password"];
$time = date("Y-m-d H:i:s", time() + 8 * 60 * 60);
// 查询
$sql = "select * from user where user='$user'";
$result = $conn->query($sql);
// echo $result;
// die();
if ($result->num_rows > 0) {
    die("账户已存在");
} else {
    $sql = "insert into `user`(user,password,times) values('$user','$password','$time')";
    // echo $sql;die();
    $pd = $conn->query($sql);
    if ($pd) {
        die('注册成功');
    } else {
        die('注册失败');
    }
};
?>

注册界面Ajax部分

function register() {
    var user = $('#username').val();
    var password = $('#password').val();
    var repassword = $('#repassword').val();
    if (user == '') {
        alert('用户名不能为空')
    } else if (password == '') {
        alert('密码不能为空')
    } else if (password != repassword) {
        alert('两次密码不一致')
    } else {
        $.ajax({
            type: "get",
            url: "php/zhuce.php?user=" + user + "&password=" + password,
            dataType: "text",
            success: function(data) {
                if (data == '注册成功') {
                    window.location.href = "denglu.html";
                } else {
                    alert(data);
                }
            },
            error: function(data) {
                alert("系统出错，请联系开发人员")
            }
        });
    }
}

注册界面css部分

.bd {
    width: auto;
    height: auto;
}

body {
    background-image: url(../img/1.jpg);
}

.zujian {
    background-color: #f8f9fa !important;
    width: 350px;
    opacity: 0.65;
    height: 500px;
    float: right;
    margin-top: 150px;
    margin-right: 100px;
    border-radius: 10px;
}

.ad {
    margin-top: 220px;
}

.left-top {
    margin-left: 40px;
}

.left-top p {
    margin-top: -10px;
    color: grey;
}

input {
    border-radius: 5px;
}

.biaodan {
    margin-left: 40px;
    margin-top: 40px;
}

span {
    color: grey;
}

.top {
    margin-top: 20px;
}

table {
    margin-top: -20px;
    height: 300px;
    border-collapse: separate;
    border-spacing: 5px;
}

.button {
    margin-right: 30px;
}

.ad {
    float: left;
    position: relative;
}

登录页面css代码

body {
    background-image: url(../img/1.jpg);
}

.zujian {
    width: 300px;
    height: 280px;
    background-color: white;
    opacity: 0.85;
    margin: auto;
    margin-top: 200px;
    border-radius: 5px;
    padding: 10px;
}

.denglu h3 {
    color: red;
    text-align: center;
    padding: 10px;
    margin-top: 0px;
}

a {
    color: black;
}

.btnan {
    margin-left: 90px;
}

.yanzm {
    background-color: antiquewhite;
}

最后上效果图