本文解决问题:通过原生Ajax快速实现用户信息检测功能
0 架构思维
要想实现这个功能我们需要先分析一下大致思路,我总结下分三步骤:
1 注册页面设计
2 表单提交通过ajax接收
3 php后台实现数据库的查询并实现信息反馈
1 实现页面设计
实现页面功能很简单,您此时需要会的技术为HTML CSS足矣。不过记住一点,我们要把最后的html文件改为php文件后缀。
废话不多说,直接贴代码:
//register.php
<!DOCTYPE html>
<html lang="en" class="is-centered is-bold">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>检测用户名是否被占用</title>
<link href="css/login.css" rel="stylesheet">
</head>
<body>
<section style="background: transparent;">
<form class="box py-3 px-4 px-2-mobile" role="form" name="form" >
<div class="is-flex is-column is-justified-to-center">
<h1 class="title is-3 mb-a has-text-centered">
注册
</h1>
<div class="inputs-wrap py-3">
<div class="control">
<input class="input" type="text" id="username" name="username" placeholder="用户名" value="" required></input>
<!-- <a href="javascript:;" onClick="checkName()">[检测用户名]</a> -->
</div>
<div class="control">
<input class="input" type="password" id="password" name="password" placeholder="密码" required></input>
</div>
<div class="control">
<input class="input" type="password" id="password2" name="password2" placeholder="确认密码" required></input>
</div>
<div class="control">
<button class="button is-submit is-primary is-outlined" onClick="checkName()">
提 交
</button>
</div>
</div>
<footer class="footer-box">
<a href="login.html">
已有账号,点击去登陆
</a>
</footer>
</div>
</form>
</section>
</body>
</html>
不过此时你的也买你很显然是这个熊样子:(奇丑无比)
因此,引入页面对应的css样式表就显得无比的重要了,css样式表说白了就是给你的页面穿上华丽的衣服。
register.css页面样式表如下:
.title{
color:rgb(116, 116, 116);
font-size: 32px;
text-align: center;
}
.box{
width: 300px;
height: 150px;
}
.py-3{
width: 200px;
height: 30px;
}
.is-flex{
width: 300px;
height: 350px;
border: 18px solid #083d82;
background-color: rgb(255, 255, 255);
}
.inputs-wrap{
margin: 0 auto;
}
.control .input{
width: 200px;
height: 26px;
margin-bottom: 25px;
border: 1px solid #083d82;
border-radius: 5px;
}
.control button{
width: 200px;
border-radius: 5px;
border: 1px solid #b99fb5;
font-size: 16px;
color: #ffffff;
background-color: #2f2fe7;
margin-left: 2px;
}
.footer-box{
width: 240px;
height: 100px;
margin-top: 110px;
margin-left: 45px;
color: #02632c;
font-size: 12px;
}
.footer-box input{
float: left;
}
.footer-box a{
font-size: 12px;
margin-left: 80px;
color: rgb(248, 91, 91);
text-decoration: none;
}
随后我们就会发现,目前的样式是无比的舒心:
到了这一步,其实距离我们实现校验功能还差了些火候,接下来咱们就赶快进入第二步。
2 表单提交通过ajax接收
没有js的页面完全就是一个傻逼的静态页面,静的让人瘆得慌。因此,你就可以想象一下,我这废话说的是多么的有水平了。进入正题:
<script>
function checkName(){
var username = form.username.value;
if(username==""){
window.alert("请填写用户名!");
form.username.focus();
return false;
}
createRequest('checkName.php',username);
}
function createRequest(url,username){
http_request = false;
if(window.XMLHttpRequest){
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
} else if(window.ActiveXObject){
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return false;
}
}
}
if(!http_request){
window.alert("不能创建XMLHTTP实例");
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open("POST",url,true);
http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http_request.send("username="+username);
}
function alertContents(){
if(http_request.readyState == 4) {
if(http_request.status ==200){
window.alert(http_request.responseText);
} else{
window.alert("您请求的页面发现错误");
}
}
}
</script>
看到没有,路老师直接把爽歪歪的代码给贴了上去,而且可气的是根本就没有给你贴任何注释,是不是看不懂了?这就是路老师想让你跟着我的脚步往下继续看,就会逐渐的明白的:
首先是第一个函数checkName(),这个函数就是当你点击提交按钮的时候触发的一个傻瓜式的方法,你点击,它就动,你不点,它就一动不动。
function checkName(){
var username = form.username.value;
if(username==""){
window.alert("请填写用户名!");
form.username.focus();
return false;
}
createRequest('checkName.php',username);
}
该函数获取username用户账户,并检测该用户名是否为空,如果为空,就给你个大逼斗,提醒你“请填写用户名!”。如果输入了内容,就会顺势调用createRequest()函数。该函数是是实现了两个功能,第一个功能是检测浏览器兼容性,第一个if检测的是Google是否兼容,后两个检测的是IE和其他浏览器是否兼容;第二个功能就是将输入的页面信息打包成post方式的包,传递给后台php去处理加工。
function createRequest(url,username){
http_request = false;
if(window.XMLHttpRequest){
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
} else if(window.ActiveXObject){
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return false;
}
}
}
if(!http_request){
window.alert("不能创建XMLHTTP实例");
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open("POST",url,true);
http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http_request.send("username="+username);
}
此时你会突然的发现,还有一个alertContents函数没有给老子介绍呢,不介绍完,别想给老子睡觉。放心吧骚年,像路老师这么年轻帅气的美男子怎么可能忘记这点细节呢?
仔细看alertContents()函数,一句话说明:就是检测php后端返回的信息是否成功的状态。readyState 的状态数有很多个,4代表完成,详细的见上篇文章的介绍。
function alertContents(){
if(http_request.readyState == 4) {
if(http_request.status ==200){
window.alert(http_request.responseText);
} else{
window.alert("您请求的页面发现错误");
}
}
}
说了半天了,中间也罗嗦了很多次php后端逻辑实现数据库的操作,具体是个啥呢?不卖关子,直接代码伺候:
3 php后台实现数据库的查询并实现信息反馈
<?php
require_once("config.php");
$username = trim($_POST['username']);
try {
//连接服务器
$pdo = new PDO(DB_DSN,DB_USER,DB_PWD);
} catch (PDOException $e) {
echo $e->getMessage();
}
$sql = 'select * from users where username = :username';
$res = $pdo->prepare($sql);
$res->bindParam(':username',$username);
if($res->execute()){
$rows = $res->fetch(PDO::FETCH_ASSOC);
if($rows){
echo "很抱歉!用户名【".$username."】已经被注册!您可以换一个用户名!";
}else{
echo "祝贺您!用户名【".$username."】没有被注册,您可以放心使用!";
}
}
?>
这还需要路老师给你解释吗?类似的代码前期的文章枯燥地给你都介绍了,别看枯燥,其实一点就着!
下一篇 玩玩ThinkPHP