实例
<!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',
{
email:email.val(), //这里用逗号分隔
password:password.val()
},
function (data) {
console.log(data);
console.log(data.status);
if(data.status===0){
// 选择当前按钮
btn.after('<span style="color: green"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(data.message) // 设置<span>中的文本内容
.fadeOut(2000);
}
else if(data.status===1){
btn.after('<span style="color: green"></span>') .next().html(data.message) .fadeOut(2000);
}
},
'json' //很关键的一步
);
}
// 用 $.ajax改写上面的 $.post
function checkUser() {
// $.ajax 参数的属性大约有20多个, 常用的是以下5个, 必须掌握
$.ajax({
// 1. 请求类型
type: 'GET',
// 2. 请求的URL地址
url: 'inc/check.php',
// 3. 需要发送到服务器上的数据,以对象方式
data: {
email: email.val(),
password: password.val()
},
// 4. 请求成功后的回调处理
success: function(data) {
// console.log(data,status,xhr); // 查看返回的数据
// 实际开发过程中,大多只用到data,status和xhr极少使用,另外,data和status也可用xhr对象获取
console.log(data);
if (data.status === 1) {
// 选择当前按钮
btn.after('<span style="color: green"></span>') // 在按钮后添加一个<span>用来显示提示信息
.next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
.html(data.message) // 设置<span>中的文本内容
.fadeOut(2000); // 将<span>的内容2秒后淡出
} else {
btn.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
// 5. 期望服务器返回的数据类型, 可选
dataType: 'json'
})
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例