使用 JQuery 进行 异步登录验证，根据规范有以下几个步骤;
// 1.拼接提交地址
// 2.获取要提交服务器的数据,邮箱,密码,使用 json 键值对拼接字符串
// 3.设置回调函数,接收返回的信息
// 4.设置返回的数据格式为 json
// 5.调用JQuery全局函数 $.post() 执行 POST 提交
//参数为：提交的url 、 提交数据 data 、回调函数 success、返回的数据格式 dataType
登录界面：
PHP 欢迎页代码：
<?php
@header('Content-type: text/html;charset=UTF-8');
echo "<h1>欢迎进入后台管理系统！ </h1>";
?>PHP 验证页代码：
<?php
//判断是否登录
if($_GET['m']=='login'){
//判断邮箱密码是否正确
if($_POST['email']=='admin@qq.com' && $_POST['password']=='admin'){
echo "1";
}else{
echo "0";
}
}
?>具体HTML代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 提交</title>
<style type="text/css">
.login{
width: 300px;
height: 200px;
border:1px solid #CCCCCC;
border-radius: 20px;
margin: auto;
text-align: center;
margin-top: 20px;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form action="admin/check.php" method="post">
<div class="login">
<h2>用户登录</h2>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" id="email" placeholder="dome@qq.com">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="输入密码">
</p>
<p>
<button id="btn">登录</button>
<span id="msg" style="color:#FF9966;font-weight: bold;"></span>
</p>
</div>
</form>
<script type="text/javascript">
// 给第一个按钮添加事件
$('#btn').on('click',function(){
//异步请求
// 1.拼接提交地址
var url = 'admin/check.php?m=login'
// 2.获取要提交服务器的数据,邮箱,密码,使用 json 键值对拼接字符串
var data = {
"email":$('#email').val(),
"password":$('#password').val()
}
// 3.设置回调函数,接收返回的信息
var success = function(res){
//如果服务器返回 1 则登录成功了
if(res=='1'){
$('#msg').text('登录成功,正在跳转中...')
// 添加一个跳转廷时,改善用户体验
setTimeout(function(){
location.href='admin/index.php'
},2000)
}else{
$('#msg').text('登录失败,邮箱或密码错误！')
$('#msg').focus()
setTimeout("$('#msg').empty()",2000) //过两秒后移除 span 元素的内容
}
}
// 4.设置返回的数据格式为 json
var dataType = 'json'
// 5.调用JQuery全局函数 $.post() 执行 POST 提交
//参数为：提交的url 、 提交数据 data 、回调函数 success、返回的数据格式 dataType
$.post(url,data,success,dataType)
// alert('msg')
return false
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手记一份：
