学生管理系统

1. 查询学生信息+筛选+分页

封装一个通用方法：function loadData(studentName,sex,pageIndex,pageSize)

2. 添加学生

将对象里面的数据，转为json字符串

JSON.stringify(对象)

将对象里面的数据，转为url字符串，写一个方法进行转换

studentNo=12345&loginPwd=123123&studentName=周杰伦

设置请求头：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

xhr.setRequestHeader('Content-Type','application/json')

3.修改学生

先根据学号查询指定学生

再修改该学生信息

4.删除学生

删除前提示用户是否确定删除

根据学号删除学生信息

<!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>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

            outline: none;

            font-size: 14px;

        }

        body{

            padding: 10px;

        }

        table{

            border-collapse: collapse;

        }

        h2{

            font-size: 20px;

            margin-bottom: 10px;

        }

        th,td{

            border: 1px solid #ddd;

            padding: 2px 20px;

        }

        td button{

            margin-right: 4px;

        }

        .search{

            border: 1px solid #eee;

            padding: 5px;

            margin-bottom: 5px;

        }

        .search *{

            margin: 0 5px;

        }

        .search button{

            padding: 0 10px;

        }

    </style>

</head>

<body>

    <h2>查询学生</h2>

    <div class="search">

        <span>姓名(模糊查询):</span>

        <input type="search" id="searchText">

        <span>性别:</span>

        <input checked name="sex" type="radio" value="">全部

        <input name="sex" type="radio" value="M"/>男

        <input name="sex" type="radio" value="F"/>女

        <button id="searchBtn">搜索</button>

    </div>

    <table>

        <thead>

            <tr>

                <th>学号</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年级</th>

                <th>电话</th>

                <th>地址</th>

                <th>生日</th>

                <th>邮箱</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody id="tbody">

        </tbody>

        <tfoot>

            <tr>

                <td colspan="9">

                    <button id="first">首页</button>

                    <button id="prev">上页</button>

                    <span id="pageIndex">1</span>

                    <span>/</span>

                    <span id="totalPage">1</span>

                    <button id="next">下页</button>

                    <button id="last">尾页</button>

                </td>

            </tr>

        </tfoot>

    </table>

    <script src="./js/bing.js"></script>

    <script>

        //window加载事件

        window.onload = function(){

            // 调用加载学生信息的方法

            loadStudents()

        }

        //搜索按钮点击事件

        searchBtn.onclick = function(){

            // 调用加载学生信息的方法

            loadStudents()

        }

        // 首页按钮点击事件

        first.onclick = function(){

            if(pageIndex.innerHTML==1) return

            //将页码设置为1

            pageIndex.innerHTML = 1

            // 调用加载学生信息的方法

            loadStudents()

        }

        // 上一页按钮点击事件

        prev.onclick = function(){

            //获取当前页

            let index = parseInt(pageIndex.innerHTML)

            //如果当前页大于1

            if(index>1){

                index--

                pageIndex.innerHTML = index

                // 调用加载学生信息的方法

                loadStudents()

            }

        }

        // 下一页按钮点击事件

        next.onclick = function(){

            //获取当前页

            let index = parseInt(pageIndex.innerHTML)

            //获取总页数

            let indexCount = parseInt(totalPage.innerHTML)

            // 如果当前页小于总页数

            if(index<indexCount){

                index++

                pageIndex.innerHTML = index

                // 调用加载学生信息的方法

                loadStudents()

            }

        }

        // 尾页按钮点击事件

        last.onclick = function(){

            //获取当前页

            let index = parseInt(pageIndex.innerHTML)

            //获取总页数

            let indexCount = parseInt(totalPage.innerHTML)

            if(index!=indexCount){

                //将总页数赋值给当前页

                pageIndex.innerHTML = totalPage.innerHTML

                // 调用加载学生信息的方法

                loadStudents()

            }

        }

        //加载学生信息的方法

        function loadStudents(){

            // 清空之前的数据

            tbody.innerHTML = ""

            // 获取搜索框里面的内容

            let studentName = searchText.value

            // 获取所有的性别单选框

            let sexes = document.getElementsByName('sex')

            // 定义性别

            let sex = ''

            sexes.forEach(r=>{

                if(r.checked){

                    sex = r.value

                }

            })

            // 发送请求获取学生信息

            let xhr = new XMLHttpRequest()

            xhr.open('GET',`http://www.bingjs.com:81/Student/GetStudentsConditionPages?pageIndex=${pageIndex.innerHTML}&studentName=${studentName}&sex=${sex}`)

            xhr.send()

            xhr.onreadystatechange = function(){

                if(xhr.readyState===4){

                    if(xhr.status===200){

                        //获取数据，总数量，当前页码，每页数量

                        let {data,count,pageIndex,pageSize} = JSON.parse(xhr.responseText)

                        //总页数

                        let pageCount = Math.ceil(count/pageSize)

                        //显示总页数

                        totalPage.innerHTML = pageCount

                        //遍历数据，展示数据

                        data.forEach(r=>{

                            let tr = $b.$c("tr")

                            let td1 = $b.$c('td')

                            td1.innerHTML = r.StudentNo

                            let td2 = $b.$c('td')

                            td2.innerHTML = r.StudentName

                            let td3 = $b.$c('td')

                            td3.innerHTML = r.Sex==='M'?'男':'女'

                            let td4 = $b.$c('td')

                            td4.innerHTML = r.Grade.GradeName

                            let td5 = $b.$c('td')

                            td5.innerHTML = r.Phone

                            let td6 = $b.$c('td')

                            td6.innerHTML = r.Address

                            let td7 = $b.$c('td')

                            td7.innerHTML = $b.$fd(new Date(r.BornDate))

                            let td8 = $b.$c('td')

                            td8.innerHTML = r.Email

                            let td9 = $b.$c('td')

                            let btn1 = $b.$c('button')

                            btn1.innerHTML = '修改'

                            btn1.onclick = function(){

                                location.href = './add.html?stuNo='+r.StudentNo

                            }

                            let btn2 = $b.$c('button')

                            btn2.innerHTML = '删除'

                            btn2.onclick = function(){

                                // 调用删除学生的方法

                                deleteStudent(r.StudentNo)

                            }

                            td9.appendChild(btn1)

                            td9.appendChild(btn2)

                            tr.appendChild(td1)

                            tr.appendChild(td2)

                            tr.appendChild(td3)

                            tr.appendChild(td4)

                            tr.appendChild(td5)

                            tr.appendChild(td6)

                            tr.appendChild(td7)

                            tr.appendChild(td8)

                            tr.appendChild(td9)

                            tbody.appendChild(tr)

                        })

                    }

                }

            }

        }

        //删除学生

        function deleteStudent(stuNo){

            if(confirm('确定删除吗？')){

                // 发送请求，删除学生

                let xhr = new XMLHttpRequest()

                xhr.open('POST','http://www.bingjs.com:81/Student/Delete')

                xhr.setRequestHeader('Content-Type','application/json')

                xhr.send(JSON.stringify({studentNo:stuNo}))

                xhr.onreadystatechange = function(){

                    if(xhr.readyState===4){

                        if(xhr.status===200){

                            if(xhr.responseText=='true'){

                                alert('删除成功！')

                                // 调用加载学生信息的方法

                                loadStudents()

                            }else{

                                alert('删除失败！')

                            }

                        }

                    }

                }

            }

        }

    </script>

</body>

</html>


<!DOCTYPE html>

<html>

<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>

    <style>

        #studentNoMsg {

            color: red;

            display: none;

        }

    </style>

</head>

<body>

    <h2 id="title">添加学生</h2>

    <table>

        <tr>

            <td>学号：</td>

            <td>

                <input type="text" id="studentNo">

                <span id="studentNoMsg">该学号已经存在</span>

            </td>

        </tr>

        <tr>

            <td>密码：</td>

            <td>

                <input type="password" id="loginPwd">

            </td>

        </tr>

        <tr>

            <td>姓名：</td>

            <td>

                <input type="text" id="studentName">

            </td>

        </tr>

        <tr>

            <td>性别：</td>

            <td>

                <input type="radio" name="sex" checked value="M">男

                <input type="radio" name="sex" value="F">女

            </td>

        </tr>

        <tr>

            <td>年级：</td>

            <td>

                <select id="gradeId">

                </select>

            </td>

        </tr>

        <tr>

            <td>电话：</td>

            <td>

                <input type="text" id="phone">

            </td>

        </tr>

        <tr>

            <td>地址：</td>

            <td>

                <textarea cols="50" rows="5" id="address"></textarea>

            </td>

        </tr>

        <tr>

            <td>生日：</td>

            <td>

                <input type="text" id="bornDate">

            </td>

        </tr>

        <tr>

            <td>邮箱：</td>

            <td>

                <input type="text" id="email">

            </td>

        </tr>

        <tr>

            <td>证件：</td>

            <td>

                <input type="text" id="identityCard">

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <button id="add">添加</button>

                <button id="cancel" onclick="clearInput()">取消</button>

            </td>

        </tr>

    </table>

    <script src="./js/bing.js"></script>

    <script>

        //窗体加载事件

        window.onload = function () {

            //调用加载年级信息的方法

            loadGrade()

            setTimeout(() => {

                // 调用根据学号加载学生的方法

                loadStudentByNo()

            }, 500);

        }

        //根据学号加载学生的方法

        function loadStudentByNo() {

            //search有内容，就表示当前页面为修改

            if (location.search) {

                //设置标题

                title.innerHTML = '修改学生'

                add.innerHTML = '修改'

                let stuNo = location.search.split('?')[1].split('=')[1]

                // 根据学号，查询学生信息

                // 根据学号，查询指定的学生对象

                let xhr = new XMLHttpRequest()

                xhr.open('GET', 'http://www.bingjs.com:81/Student/GetStudentByNo?studentNo=' + stuNo)

                xhr.send()

                xhr.onreadystatechange = function () {

                    if (xhr.readyState === 4) {

                        if (xhr.status === 200) {

                            let stu = JSON.parse(xhr.responseText)

                            //给表单元素赋值

                            studentNo.value = stu.StudentNo

                            loginPwd.value = stu.LoginPwd

                            studentName.value = stu.StudentName

                            if (stu.Sex == 'M') {

                                document.getElementsByName('sex')[0].checked = true

                            } else {

                                document.getElementsByName('sex')[1].checked = true

                            }

                            gradeId.value = stu.GradeId

                            phone.value = stu.Phone

                            address.value = stu.Address

                            bornDate.value = stu.BornDate

                            email.value = stu.Email

                            identityCard.value = stu.IdentityCard

                            //将学号文本框设置为只读

                            studentNo.setAttribute('disabled', 'disabled')

                        }

                    }

                }

            }

        }

        // 学号文本框失去焦点事件

        studentNo.onblur = function () {

            //获取文本框里面的值

            let val = this.value

            // 根据学号，查询指定的学生对象

            let xhr = new XMLHttpRequest()

            xhr.open('GET', 'http://www.bingjs.com:81/Student/GetStudentByNo?studentNo=' + val)

            xhr.send()

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    if (xhr.status === 200) {

                        if (xhr.responseText != 'null') {

                            studentNoMsg.style.display = 'inline'

                        } else {

                            studentNoMsg.style.display = 'none'

                        }

                    }

                }

            }

        }

        // 添加按钮点击事件

        add.onclick = function () {

            //如果学号已存在，取消添加操作

            if (studentNoMsg.style.display == 'inline') return

            //添加一个学生对象

            let stu = {}

            //获取表单数据，将数据赋值给学生对象

            stu.studentNo = studentNo.value

            stu.loginPwd = loginPwd.value

            stu.studentName = studentName.value

            let sexes = document.getElementsByName('sex')

            sexes.forEach(r => {

                if (r.checked) {

                    stu.sex = r.value

                }

            })

            stu.gradeId = gradeId.value

            stu.phone = phone.value

            stu.address = address.value

            stu.bornDate = bornDate.value

            stu.email = email.value

            stu.identityCard = identityCard.value

            //检查用户输入是否完整

            if (!checkInput(stu)) return

            // 发生请求，执行添加

            let xhr = new XMLHttpRequest()

            //定义提交地址

            let url = 'http://www.bingjs.com:81/Student/Add'

            if (this.innerHTML == '修改') {

                //切换提交地址为修改

                url = 'http://www.bingjs.com:81/Student/Update'

            }

            xhr.open('POST', url)

            // 设置请求头信息，定义Content-Type的格式

            // application/x-www-form-urlencoded表示参数数据的格式是url格式

            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

            // application/json表示参数数据的格式是json格式

            xhr.setRequestHeader('Content-Type', 'application/json')

            // GET请求方式的参数，放置在URL的后面

            // POST请求的参数，放置在send方法里面

            // send方法传递的参数，一般有两种格式：1.url格式，2.json格式

            // url格式：name:张三&age=20&sex=女

            // json格式：{"name":"张三","age":20,"sex":"女"}

            // xhr.send($b.objectToStr(stu))

            xhr.send(JSON.stringify(stu))

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    if (xhr.status === 200) {

                        if (xhr.responseText == 'true') {

                            alert('操作成功！')

                            //清空输入框里面的内容

                            clearInput()

                        } else {

                            alert('操作失败！')

                        }

                    }

                }

            }

        }

        //清空输入框内容

        function clearInput() {

            studentNo.value = ''

            loginPwd.value = ''

            studentName.value = ''

            document.getElementsByName('sex')[0].checked = true

            gradeId.value = '0'

            phone.value = ''

            address.value = ''

            bornDate.value = ''

            email.value = ''

            identityCard.value = ''

            studentNoMsg.innerHTML = ''

        }

        //验证输入是否完整

        function checkInput(stu) {

            if (stu.studentNo == '' || stu.loginPwd == '' || stu.gradeId == 0 || stu.phone == '' ||

                stu.address == '' || stu.bornDate == '' || stu.email == '' || stu.identityCard == '') {

                alert('请输入完整信息！')

                return false

            } else {

                return true

            }

        }

        //加载年级信息

        function loadGrade() {

            let xhr = new XMLHttpRequest()

            xhr.open('GET', 'http://www.bingjs.com:81/Grade/GetAll')

            xhr.send()

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    if (xhr.status === 200) {

                        let grades = JSON.parse(xhr.responseText)

                        grades.unshift({ GradeId: 0, GradeName: '请选择年级' })

                        grades.forEach(g => {

                            let option = $b.$c('option')

                            option.value = g.GradeId

                            option.innerHTML = g.GradeName

                            gradeId.appendChild(option)

                        });

                    }

                }

            }

        }

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,980评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,178评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,868评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,498评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,492评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,521评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,910评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,569评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,793评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,342评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,931评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2赞 342

推荐阅读更多精彩内容