简易学生管理系统 前端+AJAX(jQuery)+PHP+MYSQL

最近利用现在学会的东西写了一个简易学生管理系统，负责对学生的信息进行增删改查，在这里分享一下，尽管很low。
编写工具：VSCode，xampp
步骤：

    1. 使用HTML+CSS进行页面布局和样式
    2. 使用jQuery正则表达式对邮箱，出生年，手机号进行匹配符合条件的内容
    3. MYSQL负责创建系统对应的数据库及学生信息表
    4. 使用PHP进行对数据库中的数据进行操纵
    5. AJAX(jQuery)负责向后台传送数据到服务器中，从服务器接收数据显示到页面上并进行局部刷新
 

这里展示一下页面
页面是很丑，勉强看吧
学生信息查询页面：

添加学生页面：

遮罩层修某个学生信息：

 

 

代码如下：
1、HTML+CSS代码如下：

这个是学生信息页面和添加页面的代码，这里不介绍了，input标签里的name与数据库学生表中的属性名相同，避免混淆

<div class="wrapper">
    <div class="title">
        <img src="" alt="">
        学生管理系统
    </div>
    <div class="nav">
        <ul class="nav_ul">
            <li>学生管理</li>
            <ul>
                <li class="list">学生列表</li>
                <li class="list">新增学生</li>
            </ul>
        </ul>
        <div class="content">
            <div class="studentList">                
            </div>
            <div class="addStudent">
                <form id="add">
                    &nbsp;&nbsp;&nbsp;学号：<input type="text" name="sid"> <span>学号不能为空</span> <br>
                    &nbsp;&nbsp;&nbsp;姓名：<input type="text" name="sname"> <span>姓名不能为空</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;性别：<input type="radio" name="sex" value="男">&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="女" name="sex">&nbsp;女 <span>性别不能为空</span><br>
                    &nbsp;&nbsp;&nbsp;邮箱：<input type="text" name="mail" class="mail"> <span>邮箱不能为空</span><br>
                    出生年：<input type="text" name="birthday" class="birthday"> <span>出生年不能为空</span><br>
                    手机号：<input type="text" name="phone" class="phone"> <span>手机号不能为空</span><br>
                    &nbsp;&nbsp;&nbsp;住址：<input type="text" name="address"> <span>住址不能为空</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<input type="button" id="btSubmit" value="提交"> <input type="reset" id="btReset" value="重置">
                </form>
            </div>
        </div>
    </div>
</div>

全屏遮盖层是修改学生信息的,这个放在类名为wrapper的尾部,给外层div的position为fixed, top,right,bottom,left为0铺满全屏，背景颜色随意，它是随着点击事件淡入淡出的，这个后面我会在代码里标出

<div class="modal">
        <div class="modal-dialog">
        <h3>编辑信息</h3>
        <br>
        <div class="modal-content">
            <form id="update1">
                &nbsp;&nbsp;&nbsp;学号：<input type="text" name="sid" readonly="readonly" class="noReset"> <br><p>学号不能为空</p>
                &nbsp;&nbsp;&nbsp;姓名：<input type="text" name="sname"> <br><p>姓名不能为空</p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;性别：<input type="radio" name="sex" value="男">&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="女" name="sex">&nbsp;女<br> <p>性别不能为空</p>
                &nbsp;&nbsp;&nbsp;邮箱：<input type="text" name="mail" class='mail'> <br><p>邮箱不能为空</p>
                出生年：<input type="text" name="birthday" class="birthday"><br> <p>出生年不能为空</p>
                手机号：<input type="text" name="phone" class='phone'> <br><p>手机号不能为空</p>
                &nbsp;&nbsp;&nbsp;住址：<input type="text" name="address"> <br><p>住址不能为空</p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<input type="button" id="btSubmit" value="提交"> <input type="button" id="btReset" value="重置">
            </form>
        </div>
    </div>
</div>

CSS样式如下：

<style>
    * {
        padding: 0px;
        margin: 0px;
        list-style: none;
    }
    .wrapper {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }
    .title {
        width: 100%;
        height: 50px;
        background-color: rgb(62, 74, 155);
        line-height: 50px;
        color: #fff;
    }
    .nav {
        display: inline-block;
        position: absolute;
        top: 50px;
        bottom: 0px;
        width: