![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
$.get()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.get()方法</title>
</head>
<body>
<h3>江湖门派查询系统$.get()</h3>
<label for="school">请选择:</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
$.get('inc/school.php',function(data,status){
if (status === 'success') {
$('#school').html(data);
}
});
//更改选择时执行
$('#school').on('change',getData);
function getData(event) {
console.log(event);
$.get(
'inc/detail.php',
{key:$(event.target).val()},
function (data,status) {
if (status === 'success') {
$('#detail').html(data);
$('[value=""]').remove()
} else {
$('#detail').html('<span style="color:red">请求数据</span>');
}
}
)
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
$.post()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.post()</title>
</head>
<body>
<h3>用户登录$.post()</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p>
<p><button id="submit">提交</button></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
btn.on('click', isEmpty);
function isEmpty() {
if (email.val().length === 0) {
email.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
email.focus();
return false;
} else if (password.val().length === 0) {
password.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
password.focus();
return false;
} else if (password.val().length < 6) {
password.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
password.focus();
return false;
} else {
checkUser()
}
}
function checkUser() {
$.post(
'inc/check.php', // 处理post请求的php脚本
// 要发送到服务器上的数据
// 查询字符串形式的数据
// 'email='+$('#email').val()+'&password='+$('#password').val(),
// 对象字面量形式,最终也会转为查询字符串
{
email: email.val(),
password: password.val()
},
// 请求成功的回调
function(data) {
// console.log(data,status,xhr); // 查看返回的数据
// 实际开发过程中,大多只用到data,status和xhr极少使用,另外,data和status也可用xhr对象获取
console.log(data);
if (data.status === 1) {
$('button') // 选择当前按钮
.after('<span style="color: green"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(data.message) // 设置<span>中的文本内容
.fadeOut(2000); // 将<span>的内容2秒后淡出
} else {
$('button')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
'json' // 返回的数据类型
);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
$.ajax()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()</title>
</head>
<body>
<h3>用户登录:$.ajax()</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p>
<p><button id="submit">提交</button></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
btn.on('click', isEmpty);
function isEmpty() {
if (email.val().length === 0) {
email.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
email.focus();
return false;
} else if (password.val().length === 0) {
password.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
password.focus();
return false;
} else if (password.val().length < 6) {
password.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
password.focus();
return false;
} else {
checkUser()
}
}
function checkUser() {
$.ajax({
// 1. 请求类型
type: 'POST',
// 2. 请求的URL地址
url: 'inc/check.php',
// 3. 需要发送到服务器上的数据,以对象方式
data: {
email: email.val(),
password: password.val()
},
// 4. 请求成功后的回调处理
success: function(data) {
if (data.status === 1) {
$('button') // 选择当前按钮
.after('<span style="color: green"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(data.message) // 设置<span>中的文本内容
.fadeOut(2000); // 将<span>的内容2秒后淡出
} else {
$('button')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
// 5. 期望服务器返回的数据类型, 可选
dataType: 'json'
})
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结
$.get():用于从服务器上读取内容
$.post(): 用于向服务器发送大量的,敏感的信息(信息在消息体中而非url地址中)
load(),$.get(),$.getJSON(),$.getScript(),$.post()其实都是$.ajax()快捷方式;