简易学生管理系统 前端+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: 100%;
        height: auto;
        background-color: #eee;
    }
    .nav .nav_ul{
        position: absolute;
        width: 170px;
        height: 100%;
        top: 0px;
        left: 0px;
        bottom: 0px;
        display: inline-block;
        vertical-align: top;
        background-color: rgba(62, 74, 155,.5);
    }
    .nav_ul li {
        padding:5px 6px; 
        width: 150px;
        height: 30px;
        overflow: hidden;
        color: #eee;
        font-weight: bold;
        font-size: 14px;
    }
    .nav_ul .list {
        padding-left: 30px; 
        font-weight: normal;
    }
    .list:hover {
        background-color: #eee;
        cursor: pointer;
        color: #000;
    }
    .content {
        position: absolute;
        display: inline-block;
        height: 100%;
        left:170px;
        right: 0px;
        top: 0px;
    }
    .content .studentList {
        width: 100%;
    }
    .content .studentList table {
        text-align: center;
        width: 100%;
    }
    .content .studentList th{
        width: auto;
        height: 30px;
        background-color: rgba(131, 153, 211, 0.534);
        color: rgba(19, 42, 104, 0.534);
    }
    .content .studentList tbody td {
        width: auto;
        height: 30px;
        background-color: #fff;
    }
    .content .studentList button {
        color: #fff;
        width: 48px;
        background-color: red;
        border: none;
        cursor: pointer;
    }
    .content .studentList #delete {
        background-color: green;
    }
    .content .addStudent {
        display: none;
        width: 350px;
        margin: auto;
        margin-top: 20px;
    }
    span,.modal p {
        font-size: 12px;
        color: red;
        line-height: 16px;
        display: none;
    }
    form {
        color: rgba(63, 50, 50, 0.534);
    }
    input {
        margin: 10px 0px;
        color: rgba(63, 50, 50, 0.534);
    }
    #btSubmit,#btReset{
        width: 45px;
        margin:20px 13px;
        cursor: pointer;
    }
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
        display: none;
    }
    .modal-dialog {
        width: 460px;
        height: 460px;
        background: #fff;
        margin: 100px auto 0;
    }
    .modal-content {
        width: 250px;
        margin: auto;
    }
    .modal-content span {
        display: none;
    }
    h3 {
        display: block;
        position: relative;
        top: 15px;
        left: 20px;
        color: rgba(131, 153, 211, 0.534);
        font-size: 14px;
        font-weight: bold;
    }
</style>

2、jQuery的正则匹配

这里说明一下,所有的正则匹配我写在了前端页面里,并不是在PHP中进行判断的。

添加学生邮箱的匹配

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    

添加学生的手机号的匹配

var pattern = /^1[34578]\d{9}$/; 

出生年的匹配

var filter = /^\d{4}$/;

年份满足YYYY格式

3、数据库代码

创建数据库manage,学生信息表为student

#设置编码
SET NAMES UTF8;
#删除数据库
DROP DATABASE IF EXISTS manage;
#创建数据库
CREATE DATABASE manage CHARSET=UTF8;
#使用数据库
USE manage;
#建学生表
CREATE TABLE student(
    sid VARCHAR(10) PRIMARY KEY,
    sname VARCHAR(40) NOT NULL,
    sex VARCHAR(6) NOT NULL,
    mail VARCHAR(40) NOT NULL,
    birthday YEAR,
    phone VARCHAR(15)  NOT NULL,
    address VARCHAR(1000) NOT NULL
);

4、PHP代码

PHP负责对数据库学生信息进行操纵。在所有的PHP代码中,为了对数据库内容进行操作,必须先连接数据库,连接后要先设置后续编码,防止出现中文乱码。还有一点是方便AJAX使用的,是要先设置响应消息头部。

//设置响应消息类型
header("Content-Type:text/html");
//连接数据库
$conn = mysqli_connect("127.0.0.1","root","","manage",3306);
//设置后续编码
$sql = 'SET NAMES UTF8';

设置响应消息格式

mysqli_connect()是连接MYSQL数据库的函数,mysqli_connect()中的参数分别是主机名,数据库中的用户名,用户密码,连接的数据库名称,端口号。

查看学生列表select_student.php

<?php
    //设置响应消息类型
    header("Content-Type:text/html");
    //连接数据库
    $conn = mysqli_connect("127.0.0.1","root","","manage",3306);
    //设置后续编码
    $sql = 'SET NAMES UTF8';
    mysqli_query($conn,$sql);
    //查询所有学生信息
    $sql = "SELECT * FROM student";
    $result = mysqli_query($conn,$sql);
    echo "<table cellpadding='0' cellspacing = '0'><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>邮箱</th><th>出生年</th><th>手机号</th><th>住址</th><th>操作</th>
    </thead><tbody>";
    if($result) {
        //每个学生的信息以关联数组的形式取出
        while(($db = mysqli_fetch_assoc($result))!= ""){
            echo "<tr>";
            echo "<td class='sid'>$db[sid]</td>";
            echo "<td>$db[sname]</td>";
            echo "<td>$db[sex]</td>";
            echo "<td>$db[mail]</td>";
            echo "<td>$db[birthday]</td>";
            echo "<td>$db[phone]</td>";
            echo "<td>$db[address]</td>";
            echo "<td><button id = 'update'>编辑</button> <button id='delete'>删除</button></td>";
            echo "</tr>";
        }
        echo "</tbody></table>";
    }else {
        echo "执行失败";
    }
?>

这里查询学生得到的数据使用mysqli_fetch_assoc()。mysql_fetch_assoc() 函数从结果集result中取得一行作为关联数组。

返回根据从结果集取得的行生成的关联数组,如果没有更多行,则返回 false。

修改某个学生信息时,需要获得该学生的信息作为input的值,selectone_student.php

<?php
    //设置响应消息类型
    header("Content-Type:text/plain");
    //连接数据库
    $conn = mysqli_connect('127.0.0.1','root','','manage',3306);
    //设置后续编码
    $sql = 'SET NAMES UTF8';
    mysqli_query($conn,$sql);
    $sid = $_REQUEST['sid'];
    //查询某位同学的信息
    $selectSql = "SELECT * FROM student WHERE sid = '$sid';";
    $result = mysqli_query($conn,$selectSql);
    if($result) {
            $db = mysqli_fetch_assoc($result);
            echo "$db[sid] ";
            echo "$db[sname] ";
            echo "$db[sex] ";
            echo "$db[mail] ";
            echo "$db[birthday] ";
            echo "$db[phone] ";
            echo "$db[address]";
    }
?>

添加学生insert_student.php

<?php
    //设置响应消息类型
    header("Content-Type:text/plain");
    //获取添加学生页面部分中与属性名相对应的name的input的值
    $sid = $_REQUEST['sid'];
    $sname = $_REQUEST['sname'];
    $sex = $_REQUEST['sex'];
    $mail = $_REQUEST['mail'];
    $birthday = $_REQUEST['birthday'];
    $phone = $_REQUEST['phone'];
    $address = $_REQUEST['address'];
    $conn = mysqli_connect("127.0.0.1","root","","manage",3306);
    $sql = 'SET NAMES UTF8';
    mysqli_query($conn,$sql);
    //向学生表中插入新增的学生信息
    $sql = "INSERT INTO student VALUES(
        '$sid',
        '$sname',
        '$sex',
        '$mail',
        '$birthday',
        '$phone',
        '$address'
    );";
    $result = mysqli_query($conn,$sql);
    if($result) {
        echo "success";
    }else {
        echo "执行失败";
    }
?>

修改某个学生的信息update_student.php

<?php
    //设置响应消息类型
    header("Content-Type:text/plain");
    //获取当前修改学生页面部分中修改后的学生的个人信息
    $sid = $_REQUEST['sid'];
    $sname = $_REQUEST['sname'];
    $sex = $_REQUEST['sex'];
    $mail = $_REQUEST['mail'];
    $birthday = $_REQUEST['birthday'];
    $phone = $_REQUEST['phone'];
    $address = $_REQUEST['address'];
    //连接数据库
    $conn = mysqli_connect("127.0.0.1","root","","manage",3306);
    //设置后续编码
    $sql = 'SET NAMES UTF8';
    mysqli_query($conn,$sql);
    //更新学生信息
    $sql = "UPDATE student SET sname='$sname',sex='$sex',mail='$mail',birthday='$birthday',phone='$phone',address='$address' WHERE sid='$sid';";
    $result = mysqli_query($conn,$sql);
    if($result) {
        echo "success";
    }else {
        echo "执行失败";
    }
?>

删除某位学生delete_student.php

<?php
    //设置响应消息类型
    header("Content-Type:text/plain");
    //获取要删除的学生的学号
    $sid = $_REQUEST['sid'];
    //连接数据库
    $conn = mysqli_connect("127.0.0.1","root","","manage",3306);
    //设置后续编码
    $sql = 'SET NAMES UTF8';
    mysqli_query($conn,$sql);
    //删除对应学号的学生
    $sql = "DELETE FROM student WHERE sid = '$sid'";
    $result = mysqli_query($conn,$sql);
    if($result) {
        echo "success";
    }else {
        echo "执行失败";
    }
?>

5、AJAX代码+jQuery

AJAX负责更新局部数据,我使用的是jQuery中的AJAX。
我主要使用两个方法与PHP配合:

(1)$.get()

用法:$.get(‘2.php’,[k=v&kv],fn)

作用:创建XHR对象,发起异步请求,得到成功的响应消息,调用指定的回调方法。

具体用法:$.get(

                          ‘2.php’,    //url,请求路径

                          [ {name:’tom’,age:20} ] ,    //获取服务器端的数据

                          function(date,msg,xhr){    //得到成功的响应消息,调用指定的回调方法。

                            //对data的操作

                          }

                   )
(2)$.post()
post用法基本一致,但是常用来向服务器发送数据

修改学生页面中的刷新页面

var result = $("#update1").serialize();
$.post(
    'update_student.php',
    result,
    function(data,msg,xhr){
    }
)

serialize()序列化修改学生页面中form表单里的值

删除学生页面中的刷新页面

 $.get(
     'delete_student.php',
     {'sid':sid},
     function(data,msg,xhr){
     }
 )

添加学生页面中的刷新页面

$.get(
    'insert_student.php',
    result,
    function(txt,msg,xhr){
        console.log(txt);
        if(txt == 'success') {
            alert("添加学生成功");
            add.reset();
        }else if(txt == '执行失败') {
            alert("学号已经存在");
            console.log(txt);
        }
    }
)

点击添加学生时,学生列表页面隐藏,添加学生页面显示。下面是在前端页面使用jQuery正则判断前端页面的数据是否合法,合法才能向服务器端传输。

​
//点击学生列表时,添加学生页面隐藏,学生列表页面显示
$(".content .studentList").css("display","none");
$(".content .addStudent").css("display","block");
//change()监听当前form表单中input标签的变化
$(".content .addStudent input").change(function(){
    var n = $(this).val();
    //console.log(n);
    //将警告信息初始化
    if(n === ""){
        if($(this).hasClass("mail")){
            $(".addStudent .mail").next().html("邮箱不能为空");
        }else if($(this).hasClass("phone")){
            $(".addStudent .phone").next().html("手机号不能为空");
        }else if($(this).hasClass("phone")){
            $(".addStudent .birthday").next().html("出生年不能为空");
        }
        //学生信息不能为空,为空值时显示警告信息
        $(this).next().css("display",'inline');
    }else if($(this).hasClass("phone")){    
        //手机号的正则匹配
        function isPhoneNo(n) { 
            var pattern = /^1[34578]\d{9}$/; 
            var phoneTest = pattern.test(n); 
            if(phoneTest) {
                //手机号合法时,警告信息初始化并隐藏
                $(".addStudent .phone").next().html("手机号不能为空");
                $(".addStudent .phone").next().css("display","none");
            }else{
                //手机号非法时,警告信息变更并显示
                $(".addStudent .phone").next().html("手机号输入内容错误");
                $(".addStudent .phone").next().css("display",'inline');
            }
        }
        isPhoneNo(n);
    }else if($(this).hasClass("mail")){
        邮箱的正则匹配
        function CheckMail(mail) {
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (filter.test(mail)){
                //邮箱合法时,警告信息初始化并隐藏
                $(".addStudent .mail").next().html("邮箱格式不能为空");
                $(".addStudent .mail").next().css("display","none")
                //console.log(filter.test(mail));
            }
            else{
                //邮箱格式非法时,警告信息变更并显示
                $(".addStudent .mail").next().html("邮箱格式错误");
                $(".addStudent .mail").next().css("display",'inline');
                //console.log(filter.test(mail));
            }
        }
        CheckMail(n);
    }else if($(this).hasClass("birthday")){
        function checkBirth(birth){
            var filter = /^\d{4}$/;
            if (filter.test(birth)){
                //邮箱合法时,警告信息初始化并隐藏
                $(".addStudent .birthday").next().css("display","none")
                //console.log(filter.test(birth));
            }
            else{
                //出生年格式非法时,警告信息变更并显示
                $(".addStudent .birthday").next().html("出生年格式错误");
                $(".addStudent .birthday").next().css("display","inline");
                //console.log(filter.test(birth));
            }
        }
        checkBirth(n);
    }else{
        if($(this).val() === '男'){
            $(".addStudent input:eq(3)").next().css("display",'none');
        }else{
            $(this).next().css("display",'none');
        }
    }
})

输入完信息后,利用AJAX的$.get()方法,得到添加学生信息后的结果

//点击添加页面的提交按钮,开始AJAX
$("#btSubmit").click(function(){
    //判断是否有非法的信息
    var flag = true;
    遍历添加学生信息中form表单的值,看是否有非法输入
    $(".content .addStudent input").each(function() {
        if($(this).val() == "") {
            flag = false;
            $(this).next().css("display",'inline');
        }
    })
    //遍历警告信息,只要有警告信息显示,就非法
    $(".content .addStudent span").each(function() {
        if($(this).css("display") == "inline") {
            flag = false;
        }
    })
    if(($(".addStudent input:eq(2)").prop('checked') === false)&&($(".addStudent input:eq(3)").prop("checked") == false)){
        flag = false;
        $(".addStudent input:eq(3)").next().css("display","inline");
    }
    //序列化表单信息
    var result = $("#add").serialize();
    console.log(flag);
    //flag为true才合法,否则不能传输数据
    if(flag) {
        $.get(
            'insert_student.php',
            result,
            function(txt,msg,xhr){
                //console.log(txt);
                //获取insert_student.php传来的文本信息,判断是否成功
                if(txt == 'success') {
                    alert("添加学生成功");
                    add.reset();
                }else if(txt == '执行失败') {
                    alert("学号已经存在");
                    //console.log(txt);
                }
            }
        )
    }else {
        alert("请正确填写信息");
    }
});

学生列表页面

点击学生列表,添加学生页面隐藏,学生列表显示并更新,获取学生信息。

 $(".content .addStudent").css("display","none");
 $(".content .studentList").css("display","block");
 $.get(
     'select_student.php',
     {sid:'sid',sname:'sname',sex:'sex',mail:'mail',birthday:'birthday',phone:'phone',address:'address'},
     function(data,msg,xhr){
         $(".content .studentList").html(data);
     }
 )

删除学生信息

//使用delegate()事件代理,代理新生成的元素删除按钮执行点击事件,即从查询学生select_student.php
获得的删除按钮
$(".studentList").delegate("#delete","click",function(){
    //确认是否删除的弹窗
    var statu = confirm("确定删除么?");
    if(!statu){
        return false;
    }
    //获取当前点击删除的所在行学生学号
    var sid = $(this).parent().siblings(".sid").html();
    $.get(
        'delete_student.php',
        {'sid':sid},
        function(data,msg,xhr){
        }
    )
    $(this).parent().parent().remove();
    alert("删除成功");
});

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

学生列表的修改信息页面

点击学生列表的编辑按钮,修改学生信息的遮罩层淡入。

$(".content .addStudent").css("display","none");
$(".content .studentList").css("display","block");
$.get(
    'select_student.php',
              {sid:'sid',sname:'sname',sex:'sex',mail:'mail',birthday:'birthday',phone:'phone',address:'address'},
    function(data,msg,xhr){
        $(".content .studentList").html(data);
    }
)

获取要修改的当前学生信息

//编辑按钮也是新生成的元素,无法直接绑定事件,使用delegate()
$(".studentList").delegate("#update","click",function(){
    $(".modal").fadeIn();
    var a = $(this).parent().siblings('.sid').text();
    $.get(
        'selectone_student.php',
        {sid:a},
        function(text,msg,xhr){
            var array = text.split(' ');
            //console.log(array);
            var inputs = $("#update1 input:lt(8)");
            var j = 0;
            //console.log(array[j]);
            for(var i = 0; i < inputs.length; i++){
                console.log(array[j]);
                if(array[j] === "男") {
                    inputs[i].checked = 'checked';
                    i++;
                    j++;
                }else if(array[j] === "女"){ 
                    i++;
                    inputs[i].checked = 'checked';
                    j++;
                }else {
                    inputs[i].value = array[j];
                    j++;
                }
            }
        }
    )
});

因为学号是不能被修改的,因此需要设置为只读并可以传输,而且也不能被重置

<input type="text" name="sid" readonly="readonly" class="noReset"> 

监听当前form表单中input标签的变化,和添加信息的正则匹配相似

$(".modal input").change(function(){
    //初始化警告信息
    if($(".modal .mail").next().next().html('')){
        $(".modal .mail").next().next().html("邮箱不能为空");
    }
    if($(".modal .phone").next().next().html('')){
        $(".modal .phone").next().next().html("手机号不能为空");
    }
    if($(".modal .birthday").next().next().html('')){
        $(".modal .birthday").next().next().html("出生年不能为空");
    }
    $(".modal input:eq(3)").next().next().css("display","none");
    var a = $(this).val();
    //console.log(a);
    //输入信息为空时,警告信息显示
    if(a == ""){
        $(this).next().next().css("display",'block');
    }else if($(this).hasClass("phone")){
        function isPhoneNo(n) { 
            var pattern = /^1[34578]\d{9}$/; 
            var phoneTest = pattern.test(n); 
            console.log(phoneTest);
            if(phoneTest) {
                $(".modal .phone").next().next().css("display","none")
            }else {
                $(".modal .phone").next().next().html("手机号输入内容错误");
                $(".modal .phone").next().next().css("display","block");
            }
        }
        isPhoneNo(a);
    }else if($(this).hasClass("mail")){
        function CheckMail(mail) {
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (filter.test(mail)){
                $(".modal .mail").next().next().css("display","none")
                console.log(filter.test(mail));
            }
            else{
                $(".modal .mail").next().next().html("邮箱格式错误");
                $(".modal .mail").next().next().css("display","block");
                console.log(filter.test(mail));
            }
        }
        CheckMail(a);
    }else if($(this).hasClass("birthday")){
        function checkBirth(birth){
            var filter = /^\d{4}$/;
            if (filter.test(birth)){
                $(".modal .birthday").next().next().css("display","none")
                console.log(filter.test(birth));
            }
            else{
                $(".modal .birthday").next().next().html("出生年格式错误");
                $(".modal .birthday").next().next().css("display","block");
                console.log(filter.test(birth));
            }
        }
        checkBirth(a);
    }else{
        if($(this).val() === '男'){
            $(".modal input:eq(3)").next().next().css("display",'none');
        }else if($(this).val() === '女'){
            $(this).next().next().css("display",'none');
        }else {
            $(this).next().next().css("display",'none');
        }
    }
})

点击修改学生信息页面的提交按钮后,输入框内信息合法才能向服务器传输。传输后局部更新查询页面。和添加信息类似。

$(".modal #btSubmit").click(function(){
    //序列化表单信息
    var result = $("#update1").serialize();
    var flag = true;
    $(".modal input").each(function() {
        if($(this).val() === "") {
            flag = false;
            $(this).next().next().css("display",'block');
        }
    })
    $("#update1 p").each(function() {
        if($(this).next().next().css("display") === "block") {
            flag = false;
        }
    })
    if(($(".modal input:eq(2)").prop("checked") === false)&&($(".modal input:eq(3)").prop("checked") === false)){
        flag = false;
        $(".modal input:eq(3)").next().next().css("display","block");
    }
    var result = $("#update1").serialize();
    console.log(flag);
    if(flag) {
        $.post(
            'update_student.php',
            result,
            function(data,msg,xhr){
            }
        )
        $.get(
            'select_student.php',
            {sid:'sid',sname:'sname',sex:'sex',mail:'mail',birthday:'birthday',phone:'phone',address:'address'},
            function(data,msg,xhr){
                $(".content .studentList").html("");
                $(".content .studentList").html(data);
                alert("修改成功");
            }
        )
        $(".modal").fadeOut(150);
    }else{
        alert('请正确输入信息')
    }
})

这里有个地方需要注意,当页面加载完之后,input按钮的checked属性为undefined,不会更改,要使用prop('checked')

点击重置按钮,重置表单信息

 $(".modal #btReset").click(function(){
     var noReset = document.getElementsByClassName('noReset')[0];
     noReset.defaultValue = noReset.value;
     update1.reset();
     $("span").css("display","none");
 })

因为学号不能被重置,但是reset()方法会重置form表单中所有的input标签,所以要在重置前将学号的input标签的defaultValue设为默认值,也就是原学号。defaultValue 属性设置或返回文本框的初始内容。

  • 6
    点赞
  • 72
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值