AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX技术 不需要刷新页面的情况下，就可以产生局部刷新的效果
最初AJAX技术操作的是XML标签，现在绝大多数情况下操作的是JSON格式的字符串
1. json格式数据
// json对象
// 注意：对象的属性名，必须要双引号引起来
let obj = {
"name": "张三",
"age": 20,
"gender": "男"
}
// json数组
let arr = [
{
"name": "张三",
"age": 20,
"gender": "男"
},
{
"name": "李四",
"age": 22,
"gender": "女"
}
]2. AJAX对象
// 01.创建xhr对象 (原生ajax对象)
let xhr = new XMLHttpRequest()
// 02.初始化请求（GET请求，POST请求）
// 第一个参数是请求方式：比如GET，第二个参数是请求地址：比如192.168.11.12:81/Server/List
xhr.open('GET','./data/koubei.json')
// 03.发送请求
xhr.send()
// 04.监听读取状态改变事件
xhr.onreadystatechange = function(){
// 请求已经完成
if(xhr.readyState===4){
// 请求状态为成功
if(xhr.status === 200){
// xhr.responseText 返回响应体，它是一个json格式的字符串
// 我们需要将该字符串转为js对象
let data = JSON.parse(xhr.responseText)
}
}
}readyState 是读取状态：
0: 请求未发送
1：服务器连接已建立（请求已经发送）
2：请求已接收（服务器已经接收到该请求）
3：请求处理中（服务器正则准备你要的数据）
4：请求已完成，且响应已就绪
status 是响应的状态码：
200：成功
404：请求资源错误
500：服务器端错误
将对象里面的数据，转为json字符串 => JSON.stringify(对象)
将对象里面的数据，转为url字符串，可以写一个方法进行转换
//对象转字符串
getStrByObj: function (obj, split = "-") {
return Object.keys(obj).map((key) => [key, obj[key]].join("=")).join(split)
},studentNo=12345&loginPwd=123123&studentName=周杰伦
设置请求头（post请求设置，get请求可以忽略）：
1.xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
（表示头文件为url字符串）
2.xhr.setRequestHeader('Content-Type','application/json')
（表示头文件为json字符串）
<!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>Ajax</title>
</head>
<body>
<script>
//使用原生Ajax,请求数据
//1.创建ajax对象
let xhr = new XMLHttpRequest()
//readyState属性是读取状态，默认为0
console.log(xhr.readyState);
//2.初始化请求,需要明确请求方式和请求地址
//请求方式包括：GET POST PUT DELETE 常用的是GET POST
//请求地址包括：真实是后台接口或者本地的json文件 注意：本地的json文件只支持GET方式
xhr.open("GET", "../stu1.json")
//当初始化完成后，状态变为1
console.log(xhr.readyState);
//3.发送请求
xhr.send()
//4.注册一个onreadystatechange事件，去监听传回的值
xhr.onreadystatechange = function () {
//状态值为2，表示请求发送成功
//状态值为3，表示服务器成功接收到请求，并开始响应
//状态值为4，表示服务器响应成功
console.log(xhr.readyState);
if (xhr.readyState === 4) {
//status 是响应的状态码： 200:成功 404:请求资源错误 500:服务器端错误
if (xhr.status === 200) {
// JSON.parse()用于将JSON格式的字符串转为js对象
let data = JSON.parse(xhr.responseText)
console.log(data);
}
}
}
</script>
</body>
</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>登录</title>
<style>
* {
margin: 0;
padding: 0;
outline: none;
list-style: none;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(rgba(207, 109, 109, 0.589), rgba(109, 109, 194, 0.747), rgba(206, 196, 142, 0.699));
}
#login {
width: 400px;
height: 200px;
background-color: rgba(21, 34, 204, 0.575);
position: relative;
}
#login h2 {
text-align: center;
margin: 10px 0;
height: 30px;
color: white;
}
#login table {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
transform: translate(-50%,-50%);
}
#login td{
padding: 5px 0px;
}
#login td input{
width: 200px;
}
#login button{
font-size: 12px;
padding: 0px 10px;
cursor: pointer;
}
#login button:last-child{
margin-left: 100px;
}
#login button:hover{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="login">
<h2>高校信息管理系统</h2>
<table>
<tr>
<td>账号:</td>
<td>
<input type="text" id="loginId">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="loginPwd">
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit" id="submit">登录</button>
<button type="reset" id="reset">取消</button>
</td>
</tr>
</table>
</div>
<script>
submit.onclick = function(){
if(loginId.value==="" || loginPwd.value===""){
alert("请输入完整信息")
return
}
let xhr = new XMLHttpRequest()
xhr.open("GET",`http://www.bingjs.com:81/Admin/Login?loginId=${loginId.value}&loginPwd=${loginPwd.value}`)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
let data = JSON.parse(xhr.responseText)
alert(data.message)
if(data.success){
location.href = "./index01.html"
}
}
}
}
}
</script>
</body>
</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>高校信息管理系统</title>
<link rel="stylesheet" href="./schoolManagar.css">
</head>
<body>
<div class="main">
<div class="left">
<h2>高校信息管理系统</h2>
<a href="./inquire .html" target="content">查询学生</a>
<a href="./inquire2.html" target="content">查询课程</a>
</div>
<div class="right">
<iframe src="./inquire .html" frameborder="0" name="content" style="width:100% ;height: 100%;"></iframe>
</div>
</div>
</body>
</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>查询学生</title>
<script src="./$wzk.js"></script>
<link rel="stylesheet" href="./schoolManagar.css">
</head>
<body>
<div id="inquire">
<diV class="condition">
<h2>查询学生</h2>
<div class="name">
<span>姓名(支持模糊查询): </span>
<input type="text" id="stuName">
<button id="findBtn">查询</button>
<button id="addBtn">添加</button>
</div>
<div class="sex">
<span>性别</span>
<input type="radio" name="sex1" value="" checked>全部
<input type="radio" name="sex1" value="M">男
<input type="radio" name="sex1" value="F">女
</div>
</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>
</table>
<div id="footer">
<button id="first">首页</button>
<button id="prev">上一页</button>
<span id="pageIndex1"></span>
<span>/</span>
<span id="pageCount1"></span>
<button id="next">下一页</button>
<button id="last">尾页</button>
<select id="pageSize1">
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
</div>
</div>
<div id="edit">
<h2 id="title">添加学生</h2>
<table>
<tr>
<td>学号:</td>
<td>
<input type="text" id="studentNo" class="width" placeholder="请输入2-4位数字">
<span id="checkText">该学号已存在</span>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="loginPwd" class="width" placeholder="请输入6-12位数字">
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" id="studentName" class="width" placeholder="请输入2-4位汉字">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="M" checked>男
<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" class="width" placeholder="请输入11位数字,以1开头">
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<textarea id="address" cols="31" rows="4" placeholder="请输入2-16位汉字"></textarea>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<input type="text" id="bornDate" class="width" placeholder="格式为XXXX-XX-XX">
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="text" id="email" class="width" placeholder="格式为XXX@XXX.com/.com.cn">
</td>
</tr>
<tr>
<td>身份证:</td>
<td>
<input type="text" id="identityCard" class="width" placeholder="请输入18位数字,最后一位可以为X">
</td>
</tr>
<tr>
<td></td>
<td>
<button id="add">添加</button>
<button id="cancel">取消</button>
</td>
</tr>
</table>
<div class="closeBtn">X</div>
</div>
<script>
window.onload = function () {
//加载年级信息
loadGrade()
pageSize = pageSize1.value
pageIndex = 1
//调用学生信息
loadStudents(pageIndex, pageSize)
//查询点击事件
findBtn.onclick = function () {
pageIndex = 1
loadStudents(pageIndex, pageSize)
}
//首页点击事件
first.onclick = function () {
//令页码为1
pageIndex = 1
//再加载数据
loadStudents(pageIndex, pageSize)
}
//上一页点击事件
prev.onclick = function () {
pageIndex = pageIndex1.innerHTML
if (pageIndex > 1) {
pageIndex--
} else {
pageIndex = 1
alert("已经是首页了")
}
loadStudents(pageIndex, pageSize)
}
//下一页点击事件
next.onclick = function () {
pageIndex = pageIndex1.innerHTML
pageCount = pageCount1.innerHTML
if (pageIndex < pageCount) {
pageIndex++
} else {
pageIndex = pageCount
alert("已经是尾页了")
}
loadStudents(pageIndex, pageSize)
}
//尾页点击事件
last.onclick = function () {
//把总页数赋值给当前页
pageIndex = pageCount1.innerHTML
//再加载数据
loadStudents(pageIndex, pageSize)
}
//根据每页数量刷新数据
pageSize1.onchange = function () {
pageSize = this.value
pageIndex = 1
loadStudents(pageIndex, pageSize)
}
//关闭窗口事件
document.querySelector(".closeBtn").onclick = function () {
//关闭窗口
edit.style.visibility = "hidden"
clearInput()
}
//添加按钮点击事件
addBtn.onclick = function () {
//打开窗口
edit.style.visibility = "visible"
//修改标题文本
title.innerHTML = "添加学生"
//修改按钮文本
add.innerHTML = "添加"
clearInput()
//去除元素的disabled属性
studentNo.removeAttribute("disabled")
}
//添加和修改学生数据事件
add.onclick = function () {
//验证表单数据非空
if (!checkInput())
return
//获取表单数据，将数据赋值给学生对象
//先定义一个空对象
let stu = {}
//再对这个对象里面的每个属性进行赋值
stu.studentNo = studentNo.value
stu.loginPwd = loginPwd.value
stu.studentName = studentName.value
stu.sex = [...document.getElementsByName("sex")].find(s => s.checked === true).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
// 发生请求，执行添加
let xhr = new XMLHttpRequest()
// 设置请求头信息，定义Content-Type的格式
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')表示参数数据的格式是url格式
// xhr.setRequestHeader('Content-Type','application/json')表示参数数据的格式是json格式
let url = ``
if (title.innerHTML === "添加学生") {
url = `http://www.bingjs.com:81/Student/Add`
} else {
url = `http://www.bingjs.com:81/Student/Update`
}
xhr.open("POST", url)
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") {
if (title.innerHTML === "添加学生") {
alert("添加成功")
//清空输入框内容
clearInput()
loadStudents()
} else {
alert("修改成功")
//清空输入框内容
clearInput()
loadStudents()
}
} else {
if (title.innerHTML === "添加学生") {
alert("添加失败")
} else {
alert("修改失败")
}
}
}
}
}
}
//取消按钮点击事件
cancel.onclick = function () {
clearInput()
}
let studentNo = document.querySelector("#studentNo")
let loginPwd = document.querySelector("#loginPwd")
let studentName = document.querySelector("#studentName")
let phone = document.querySelector("#phone")
let address = document.querySelector("#address")
let bornDate = document.querySelector("#bornDate")
let email = document.querySelector("#email")
let identityCard = document.querySelector("#identityCard")
let arr = [studentNo, loginPwd, studentName, phone, address, bornDate, email, identityCard]
arr.forEach(a => {
// 获得焦点事件
a.onfocus = function () {
this.placeholder = ""
}
})
//失去焦点事件
//学号输入框失去焦点事件
arr[0].onblur = function () {
this.placeholder = "请输入2-4位数字"
let xhr = new XMLHttpRequest()
xhr.open("GET", `http://www.bingjs.com:81/Student/GetStudentByNo?studentNo=${this.value}`)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (xhr.responseText == "null") {
checkText.style.display = "none"
} else {
checkText.style.display = "block"
}
}
}
}
}
arr[1].onblur = function () {
this.placeholder = "请输入6-12位数字"
}
arr[2].onblur = function () {
this.placeholder = "请输入2-4位汉字"
}
arr[3].onblur = function () {
this.placeholder = "请输入11位数字,以1开头"
}
arr[4].onblur = function () {
this.placeholder = "请输入2-16位汉字"
}
arr[5].onblur = function () {
this.placeholder = "格式为XXXX-XX-XX"
}
arr[6].onblur = function () {
this.placeholder = "格式为XXX@XXX.com/.com.cn"
}
arr[7].onblur = function () {
this.placeholder = "请输入18位数字,最后一位可以为X"
}
}
//创建元素的方法
function $create(tagName) {
return document.createElement(tagName)
}
//加载学生信息的方法
function loadStudents(pageIndex, pageSize) {
//发送请求获取学生信息
let xhr = new XMLHttpRequest()
//获取姓名输入框里面的值
let studentName = stuName.value
//获取性别里面的值
let sex = [...document.getElementsByName("sex1")].find(r => r.checked === true).value
//http://www.bingjs.com:81/Student/GetStudentsConditionPages 查询学生+条件+分页 [GET请求]
xhr.open("GET", `http://www.bingjs.com:81/Student/GetStudentsConditionPages?studentName=${studentName}&sex=${sex}&pageIndex=${pageIndex}&pageSize=${pageSize}`)
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)
//将总页数和当前页赋值给相应的元素
pageCount1.innerHTML = pageCount
pageIndex1.innerHTML = pageIndex
//在加载前先清空tbody里面的数据
tbody.innerHTML = ""
//将数组循环加载数据
data.forEach(s => {
let tr = $create("tr")
let td1 = $create("td")
td1.innerHTML = s.StudentNo
let td2 = $create("td")
td2.innerHTML = s.StudentName
let td3 = $create("td")
td3.innerHTML = s.Sex === 'M' ? "男" : "女"
let td4 = $create("td")
td4.innerHTML = s.GradeId
let td5 = $create("td")
td5.innerHTML = s.Phone
let td6 = $create("td")
td6.innerHTML = s.Address
let td7 = $create("td")
td7.innerHTML = $wzk.getMinDate(new Date(s.BornDate))
let td8 = $create("td")
td8.innerHTML = s.Email
let td9 = $create("td")
let btn1 = $create("button")
btn1.innerHTML = "修改"
btn1.className = "btn"
btn1.onclick = function () {
loadStudentByNo(s.StudentNo)
}
let btn2 = $create("button")
btn2.innerHTML = "删除"
btn2.className = "btn"
btn2.onclick = function () {
// 调用删除学生的方法
deleteStudent(s.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('删除失败!')
}
}
}
}
}
}
//获取年级的方法
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 = document.createElement("option")
option.value = g.GradeId//此处一定要加option.value = g.GradeId
option.innerHTML = g.GradeName
gradeId.appendChild(option)
})
}
}
}
}
//定义清空输入框里面的方法
function clearInput() {
studentNo.value = ""
loginPwd.value = ""
studentName.value = ""
gradeId.value = 0
phone.value = ""
address.value = ""
bornDate.value = ""
email.value = ""
identityCard.value = ""
checkText.style.display = "none"
}
//验证输入框非空方法
function checkInput() {
//验证学号正则表达式
let reg1 = /^\d{4,8}$/
//验证密码正则表达式
let reg2 = /^\d{6,12}$/
//验证姓名正则表达式
let reg3 = /^[\u4E00-\u9FA5]{2,4}$/
//验证电话正则表达式
let reg4 = /^1[356789]\d{9}$/
//验证地址正则表达式
let reg5 = /^[\u4E00-\u9FA5]{2,16}$/
//验证生日正则表达式
let reg6 = /^\d{4}[/-](0?[13578]|1[02])[/-]((0?[1-9]|[1-2][0-9])|30|31)$|^\d{4}[/-](0?[469]|11)[/-]((0?[1-9]|[1-2][0-9])|30)$|^\d{4}[/-]0?2[/-](0?[1-9]|[1-2][0-9])$/
//验证邮箱正则表达式
let reg7 = /^\w+@\w+(\.\w+){1,2}$/
//验证身份证正则表达式
let reg8 = /^\d{17}(\d|X)$/
let isOK1 = reg1.test(studentNo.value)
let isOK2 = reg2.test(loginPwd.value)
let isOK3 = reg3.test(studentName.value)
let isOK4 = reg4.test(phone.value)
let isOK5 = reg5.test(address.value)
let isOK6 = reg6.test(bornDate.value)
let isOK7 = reg7.test(email.value)
let isOK8 = reg8.test(identityCard.value)
if (isOK1 & isOK2 & isOK3 & isOK4 & isOK5 & isOK6 & isOK7 & isOK8) {
alert("格式正确")
return true
} else {
alert("格式错误")
return false
}
}
//根据学号加载学生的方法
function loadStudentByNo(stuNo) {
//打开窗口
edit.style.visibility = "visible"
//修改标题文本
title.innerHTML = "修改学生"
//修改按钮文本
add.innerHTML = "修改"
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
studentNo.setAttribute("disabled", "disabled")
loginPwd.value = stu.LoginPwd
studentName.value = stu.StudentName
gradeId.value = stu.GradeId
phone.value = stu.Phone
address.value = stu.Address
bornDate.value = $wzk.getMinDate(new Date(stu.BornDate))
email.value = stu.Email
identityCard.value = stu.IdentityCard
if (stu.Sex === "M") {
document.getElementsByName("sex")[0].checked = true
} else {
document.getElementsByName("sex")[1].checked = true
}
}
}
}
}
</script>
</body>
</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>查询课程</title>
<script src="./$wzk.js"></script>
<link rel="stylesheet" href="./schoolObject.css">
</head>
<body>
<body>
<div id="inquire">
<diV class="condition">
<h2>查询课程</h2>
<div class="name">
<span>课程名称(支持模糊查询): </span>
<input type="text" id="subName">
<button id="findBtn">查询</button>
<button id="addBtn">添加</button>
</div>
<div class="Id">
<span>年级编号:</span>
<select id="gradeId">
<option value="0">请选择年级</option>
<option value="1">大一</option>
<option value="2">大二</option>
<option value="3">大三</option>
</select>
</div>
</diV>
<table>
<thead>
<tr>
<th>年级</th>
<th>年级编号</th>
<th>课程</th>
<th>课程编号</th>
<th>课时</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<div id="footer">
<button id="first">首页</button>
<button id="prev">上一页</button>
<span id="pageIndex1"></span>
<span>/</span>
<span id="pageCount1"></span>
<button id="next">下一页</button>
<button id="last">尾页</button>
<select id="pageSize1">
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
</div>
</div>
<div id="edit">
<h2 id="title">添加课程</h2>
<table>
<tr>
<td>课程编号:</td>
<td>
<input id="subjectId" type="text" class="width" placeholder="请输入1-4位数字">
<span id="checkText">该课程编号已存在</span>
</td>
</tr>
<tr>
<td>课程名称:</td>
<td>
<input id="subjectName" type="text" class="width" placeholder="请输入4-16位汉字/数字/字母">
</td>
</tr>
<tr>
<td>课时:</td>
<td>
<input type="text" id="classHour" class="width" placeholder="请输入1-3位数字">
</td>
</tr>
<tr>
<td>年级:</td>
<td>
<select id="gradeId2" class="width">
<option value="0">请选择年级</option>
<option value="1">大一</option>
<option value="2">大二</option>
<option value="3">大三</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<button id="add">添加</button>
<button id="cancel">取消</button>
</td>
</tr>
</table>
<div class="closeBtn">X</div>
</div>
<script>
window.onload = function () {
pageSize = pageSize1.value
pageIndex = 1
//调用课程信息
loadSubject(pageIndex, pageSize)
//查询点击事件
findBtn.onclick = function () {
pageIndex = 1
loadSubject(pageIndex, pageSize)
}
//首页点击事件
first.onclick = function () {
//令页码为1
pageIndex = 1
//再加载数据
loadSubject(pageIndex, pageSize)
}
//上一页点击事件
prev.onclick = function () {
pageIndex = pageIndex1.innerHTML
if (pageIndex > 1) {
pageIndex--
} else {
pageIndex = 1
alert("已经是首页了")
}
loadSubject(pageIndex, pageSize)
}
//下一页点击事件
next.onclick = function () {
pageIndex = pageIndex1.innerHTML
pageCount = pageCount1.innerHTML
if (pageIndex < pageCount) {
pageIndex++
} else {
pageIndex = pageCount
alert("已经是尾页了")
}
loadSubject(pageIndex, pageSize)
}
//尾页点击事件
last.onclick = function () {
//把总页数赋值给当前页
pageIndex = pageCount1.innerHTML
//再加载数据
loadSubject(pageIndex, pageSize)
}
//根据每页数量刷新数据
pageSize1.onchange = function () {
pageSize = this.value
pageIndex = 1
loadSubject(pageIndex, pageSize)
}
//根据年级编号查询课程信息
gradeId.onchange = function () {
let xhr = new XMLHttpRequest()
xhr.open("GET", `http://www.bingjs.com:81/Subject/GetSubjectsByGrade?gradeId=${this.value}`)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let subject = JSON.parse(xhr.responseText)
loadData(subject)
}
}
}
}
//添加按钮点击事件
addBtn.onclick = function () {
//打开窗口
edit.style.visibility = "visible"
//修改标题文本
title.innerHTML = "添加课程"
//修改按钮文本
add.innerHTML = "添加"
clearInput()
}
//关闭窗口事件
document.querySelector(".closeBtn").onclick = function () {
//关闭窗口
edit.style.visibility = "hidden"
clearInput()
}
//取消按钮点击事件
cancel.onclick = function () {
clearInput()
}
//添加和修改课程数据事件
add.onclick = function () {
//验证表单数据非空
if (!checkInput())
return
//获取表单数据，将数据赋值给课程对象
//先定义一个空对象
let stu = {}
//再对这个对象里面的每个属性进行赋值
stu.subjectId = subjectId.value
stu.subjectName = subjectName.value
stu.classHour = classHour.value
stu.gradeId = gradeId2.value
// 发生请求，执行添加
let xhr = new XMLHttpRequest()
let url = ``
if (title.innerHTML === "添加课程") {
url = `http://www.bingjs.com:81/Subject/Add`
} else {
url = `http://www.bingjs.com:81/Subject/Update`
}
xhr.open("POST", url)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify(stu))
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (xhr.responseText == "true") {
if (title.innerHTML === "添加课程") {
alert("添加成功")
//清空输入框内容
clearInput()
loadSubject()
} else {
alert("修改成功")
//清空输入框内容
clearInput()
loadSubject()
}
} else {
if (title.innerHTML === "添加课程") {
alert("添加失败")
} else {
alert("修改失败")
}
}
}
}
}
}
let subjectId = document.querySelector("#subjectId")
let subjectName = document.querySelector("#subjectName")
let classHour = document.querySelector("#classHour")
let arr = [subjectId, subjectName, classHour]
arr.forEach(a => {
// 获得焦点事件
a.onfocus = function () {
this.placeholder = ""
}
})
//失去焦点事件
//课程编号输入框失去焦点事件
arr[0].onblur = function () {
this.placeholder = "请输入1-4位数字"
let xhr = new XMLHttpRequest()
xhr.open("GET", `http://www.bingjs.com:81/Subject/GetSubjectById?subjectId=${this.value}`)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (xhr.responseText == "null") {
checkText.style.display = "none"
} else {
checkText.style.display = "block"
}
}
}
}
}
arr[1].onblur = function () {
this.placeholder = "请输入4-16位汉字/数字/字母"
}
arr[2].onblur = function () {
this.placeholder = "请输入1-3位数字"
}
}
//创建元素的方法
function $create(tagName) {
return document.createElement(tagName)
}
//加载课程信息的方法
function loadSubject(pageIndex, pageSize) {
//发送请求获取课程信息
let xhr = new XMLHttpRequest()
//获取课程名称输入框里面的值
let subjectName = subName.value
xhr.open("GET", `http://www.bingjs.com:81/Subject/GetSubjectsConditionPages?subjectName=${subjectName}&pageIndex=${pageIndex}&pageSize=${pageSize}`)
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)
//将总页数和当前页赋值给相应的元素
pageCount1.innerHTML = pageCount
pageIndex1.innerHTML = pageIndex
//将数组循环加载数据
loadData(data)
}
}
}
}
//定义清空输入框里面的方法
function clearInput() {
subjectId.value = ""
subjectName.value = ""
classHour.value = ""
gradeId2.value = 0
checkText.style.display = "none"
}
// //将数组循环加载数据的方法
function loadData(arr) {
//在加载前先清空tbody里面的数据
tbody.innerHTML = ""
arr.forEach(s => {
let tr = $create("tr")
let td1 = $create("td")
td1.innerHTML = s.Grade.GradeName
let td2 = $create("td")
td2.innerHTML = s.GradeId
let td3 = $create("td")
td3.innerHTML = s.SubjectName
let td4 = $create("td")
td4.innerHTML = s.GradeId
let td5 = $create("td")
td5.innerHTML = s.SubjectId
let td6 = $create("td")
let btn1 = $create("button")
btn1.innerHTML = "修改"
btn1.className = "btn"
btn1.onclick = function () {
loadSubjectById(s.SubjectId)
}
let btn2 = $create("button")
btn2.innerHTML = "删除"
btn2.className = "btn"
btn2.onclick = function () {
deleteSubject(s.SubjectId)
}
td6.appendChild(btn1)
td6.appendChild(btn2)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
tr.appendChild(td6)
tbody.appendChild(tr)
})
}
//根据课程编号加载一个课程的方法
function loadSubjectById(subId) {
//打开窗口
edit.style.visibility = "visible"
//修改标题文本
title.innerHTML = "修改课程"
//修改按钮文本
add.innerHTML = "修改"
let xhr = new XMLHttpRequest()
xhr.open("GET", `http://www.bingjs.com:81/Subject/GetSubjectById?subjectId=${subId}`)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let sub = JSON.parse(xhr.responseText)
subjectId.value = sub.SubjectId
subjectId.setAttribute("disabled", "disabled")
subjectName.value = sub.SubjectName
classHour.value = sub.ClassHour
gradeId2.value = sub.GradeId
}
}
}
}
//删除课程
function deleteSubject(subId) {
if (confirm('确定删除吗？')) {
// 发送请求，删除课程
let xhr = new XMLHttpRequest()
xhr.open('POST', `http://www.bingjs.com:81/Subject/Delete`)
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify({ subjectId: subId }))
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (xhr.responseText == 'true') {
alert('删除成功!')
// 调用加载课程信息的方法
loadSubject()
} else {
alert('删除失败!')
}
}
}
}
}
}
//验证输入框非空方法
function checkInput() {
//验证课程编号:正则表达式
let reg1 = /^\d{1,4}$/
//验证课程名称正则表达式
let reg2 = /^([\u4E00-\u9FA5]|\w){4,16}$/
//验证课时正则表达式
let reg3 = /^\d{1,3}$/
let isOK1 = reg1.test(subjectId.value)
let isOK2 = reg2.test(subjectName.value)
let isOK3 = reg3.test(classHour.value)
if (isOK1 & isOK2 & isOK3 & gradeId2.value != 0) {
alert("格式正确")
return true
} else {
alert("格式错误")
return false
}
}
</script>
</body>
</html>网页显示为：
1812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
