本文解决问题：通过原生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
大家如果喜欢技术，并想有个好的交流平台可以关注我的 我的知乎首页，会不定期分享本人觉得比较好的技术类电子书。
另外，自己创建的一个技术qq群，玩转技术群，目前手头里有一批项目，前后端人员都需要，兼职，有技术的你欢迎加入，一起学习成长。
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
