图片1.png
写案例三步：
1、熟悉案例的效果
2、根据观察到的效果写思路
3、根据思路写代码实现*
思路代码
1、构建基本的html布局
2、阻止表单跳转的默认行为， return false 即可
3、只有用户名和密码都满足验证规则之后，才可发送ajax请求
4、都满足条件之后，在else{}段中发送ajax请求进行验证：
5、在login.php页面中接收用户名和密码，进行数据库的匹配：
代码实现->PHP部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#error{ color:red; }
</style>
</head>
<body>
<form onsubmit = "return submitForm()">
<span id='error'></span>
<p>
用户名： <input type="text" id="username">
</p>
<p>
密码： <input type="password" id="password">
</p>
<p>
<input type="submit" value='登录' id="submit">
</p>
</form>
</body>
<script type="text/javascript">
var userEle = document.getElementById('username');
var passEle = document.getElementById('password');
var errEle = document.getElementById('error');
var submit = document.getElementById('submit');
function submitForm(){
//只能是字母开头,用户名最少6位，只能是字母数字的组合，
var reg = /^[a-zA-Z][a-zA-Z0-9]{5,}$/;
if(userEle.value == ''){
//给出对应的提示信息
errEle.innerHTML = '请输入用户名';
//让对应的元素文本框获取焦点
userEle.focus();
}else if(!reg.test(userEle.value)){
//不满足正则
errEle.innerHTML = '用户名只能是字母开头，最少6位';
userEle.focus();
}else if(passEle.value == ''){
errEle.innerHTML = '请输入密码';
passEle.focus();
}else{
//防止用户频繁的点击，造成服务器数据库压力,对按钮进行禁用
submit.disabled = true;
submit.value = '正在进入..';
errEle.innerHTML = ''; //清除提示信息
//拼接用户和密码的参数
var param = 'username='+userEle.value+'&password='+passEle.value;
//发送ajax请求进行用户名和密码的匹配
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var info = JSON.parse(this.responseText);
if(info.code == 200){
alert('登录成功');
location.href = 'index.php';
}else{
errEle.innerHTML = info.message;
//失败，恢复按钮可点击
submit.disabled = false;
submit.value = '登录';
}
}
}
xhr.open('get','login.php?'+param,true);
xhr.send(null);
}
return false; // 阻止表单提交
}
</script>
</html>
代码实现->HTML部分
<?php
sleep(3);//延迟3秒后执行
//接收用户名和密码
$username = $_GET['username'];
$password = md5($_GET['password']);
//链接数据库
$link = mysqli_connect("localhost",'root','root','db');
mysqli_query($link,"set names utf8");
//定义sql语句，判断用户名和密码是否匹配
$sql = "select * from users where username = '$username' and password = '$password'";
$res = mysqli_query($link,$sql);
$row = mysqli_fetch_assoc($res);
if($row){
//用户名和密码匹配
//{"code":"200","message":"ok","data":[{},{},{}]}
echo json_encode(['code'=>200,'message'=>'ok'],288);
}else{
//用户名和密码不匹配
echo json_encode(['code'=>-1,'message'=>'用户名或密码错误'],288);
}
网友评论