html代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现登录案例</title>
<script src="../jquery/jquery-3.2.1.min.js"></script>
<style>
form{
width: 500px;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<form action="check.php" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="email">邮箱：</label>
<input type="text" id="email" name="email">
</p>
<p>
<label for="password">密码：</label>
<input type="text" id="password" name="password">
</p>
<p>
<button>登录</button>
<span id="tips" style="font-size: 1.2em;color: red;"></span>
</p>
</fieldset>
</form>
</body>
<script>
$('button').on('click',function () {
// 1.提交地址
var URL='check.php?m=login'
// 2.要提交的数据
var data={
'email':$('#email').val(),
'password':$('#password').val()
}
// 3.成功回调函数
var success=function (res) {
if(res=='1'){
$('#tips').text('登录成功，正在跳转...')
setTimeout(function () {
location.href='index.php'
},2000)
}else{
$('#tips').text('邮箱密码错误，请重新输入...')
$('#email').focus()
setTimeout("tips.innerHTML='' ",2000)
}
}
// 4.设置返回数据格式
var dataTYPE='json'
// 5.调用全面函数$.post()
$.post(URL,data,success,dataTYPE)
return false
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
chech.php代码：
<?php
if($_GET['m'] == 'login'){
if($_POST['email']=='admin@php.cn'&& $_POST['password']=='123456'){
echo '1';
}else{
echo '0';
}
}
index.php代码：
<?php
header("content-type:text/html;charset=utf8");
echo '<h1>登录成功</h1>';
手抄：
运行效果图：
