学生管理系统

作者: wy22 | 来源:发表于2022-01-04 13:37 被阅读0次

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>

<head>

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

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

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

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

</div>

<table>

<thead>

<tr>

</tr>

</thead>

</tbody>

<tfoot>

<tr>

</td>

</tr>

</tfoot>

</table>

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

<style>

#studentNoMsg {

color: red;

display: none;

}

</style>

</head>

<body>

<table>

<tr>

<td>

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

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

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

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

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

//窗体加载事件

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>

网友评论

本文标题：学生管理系统

本文链接：https://www.haomeiwen.com/subject/ldrxqrtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

学生管理系统

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读