收藏
批改状态：未批改
老师批语：
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 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="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var email = $('#email');
var password = $('#password');
var btn = $('#submit');
//给btn 按钮添加点击事件
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{
checkUser1()
}
}
function checkUser() {
$.post(
//POST请求的php脚本
'inc/check.php',
// 要发送到服务器上的数据
// 查询字符串形式的数据
// 'email='+$('#email').val()+'&password='+$('#password').val(),
// 对象字面量形式,最终也会转为查询字符串
{
email: email.val(),
password: password.val()
},
//请求成功的回调
function (data) {
// console.log(data,status,xhr); // 查看返回的数据
// console.log(data);
if (data.status === 1){
$('button').after('<span style="color: green"></span>')
.next().html(data.message).fadeOut(2000);
}else {
$('button')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
'json'
)
}
function checkUser1() {
// $.ajax 参数的属性大约有20多个, 常用的是以下5个, 必须掌握
$.ajax({
// 1.请求类型
type: 'POST',
//2.请求的URL地址
url: 'inc/check.php',
// 3.需要发送到服务器上的数据,以对象方式
data: {
email:email.val(),
password: password.val()
},
//请求成功后回调处理
success: function (data) {
if (data.status === 1){
$('button').after('<span style="color: green"></span>').next().html(data.message).fadeOut(2000);
}else {
$('button').after('<span style="color: red"></span>').next().html(data.message).fadeOut(2000);
}
},
dataType: 'json'
})
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
