<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>jQuery-ajax</title>
<style>
#result {
border: 1px solid #ccc;
padding: 5px;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="edit">
<p>课程名称:<input type="text" id="subjectName"></p>
<p>课程课时:<input type="text" id="classHour"></p>
<p>所属年级:<input type="text" id="gradeId"></p>
<p>
<button id="add">添加</button>
</p>
</div>
<hr>
<div>
<p>所属年级:
<input type="text" id="gradeId2">
<button id="find">查询</button>
</p>
<div id="result"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 使用原生js获取所有的课程信息
/* // 01.创建xhr对象
let xhr = new XMLHttpRequest()
// 02.初始化请求
xhr.open('GET','http://www.bingjs.com:81/Subject/GetAll')
// 03.发送请求
xhr.send()
// 04.监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
let res = JSON.parse(xhr.responseText)
console.log(res);
}
}
} */
// 使用jQuery发送ajax-get请求(不需要传参)
/* $.get('http://www.bingjs.com:81/Subject/GetAll',function(res){
console.log(res);
}) */
//查询按钮点击事件
$('#find').click(function() {
// 使用jQuery发送ajax-get请求(需要传参)
// 有两种方式传参数:1.将参数拼接在url后面 2.通过get方法的第二个参数传递请求参数
$.get('http://www.bingjs.com:81/Subject/GetSubjectsByGrade', {
gradeId: $('#gradeId2').val()
}, function(res) {
// html()方法,就相当于js对象的innerHTML属性
$('#result').html(JSON.stringify(res))
})
})
//添加按钮点击事件
$('#add').click(function() {
// 非空验证
if (!checkInput()) return
// post()方法,用于发送ajax-post请求,如果需要传递请求参数,在post方式的第2个参数中设置.
$.post('http://www.bingjs.com:81/Subject/Add', {
subjectName: $('#subjectName').val(),
classHour: $('#classHour').val(),
gradeId: $('#gradeId').val()
}, function(res) {
if (res === true) {
alert('添加成功')
}
})
})
// 非空验证
function checkInput() {
let isOK = true //该变量用于表示是否验证通过
// jQuery对象的遍历方法是each()
// each()方法里面写一个回调函数,
//回调函数的第一个参数是索引,第二个参数是遍历的每一项
$('#edit input').each(function(index, item) {
// val()方法,获取表单元素的值
if ($(item).val() == "") {
isOK = false
return
}
})
return isOK
}
checkInput()
</script>
</body>
</html>
