这个实例功能虽然不复杂,但是是一个综合型的实例,用到的很多方面的知识(html,css,js,ajax,php,mysql,json),很值得初学者实践一下。
先上几张效果图:
图一
图二
图三
图四
下面是代码,所有代码都在同一个文件中,注释没怎么写了。
<?php
if(isset($_GET['id'])){//当有用户名提交时
$username=trim($_GET['id']);
$result=array();
if(!preg_match('/^[a-z][a-z0-9]{3,19}$/i',$username)){
$result['status']=0;
$result['text']='用户名 '.$username.' 格式不正确';
die(json_encode($result));
}
//连接数据库
mysql_connect("localhost",'root','8888');
mysql_select_db('test');
$sql="select username from users where username='$username'";
$query=mysql_query($sql);
if(mysql_num_rows($query)>0){
$result['status']=0;
$result['text']='用户名 '.$username.' 已存在';
}else{
$result['status']=1;
$result['text']='用户名 '.$username.' 可用';
}
echo json_encode($result);
die();
}
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax实例之用户名即时检测</title>
<style type="text/css">
body{background-color:#fff;}
p{font-size:20px;font-family:微软雅黑;}
form{font-size:14px;}
input{padding:4px;border:1px solid #dfdfdf;outline:none;border-radius:5px;}
span.info{font-size:12px;color:gray;}
span.ok{font-size:12px;color:green;}
span.bad{font-size:12px;color:red;}
</style>
<script type="text/javascript">
var ajax=null;
function createajax(){ //创建ajax对象
if(window.ActiveXObject){
ajax=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}
}
function checkname(){ //失去焦点时调用,检测用户名是否存在
var username=document.myform.username.value;
var tip=document.getElementById('tip');
if(username==""){
tip.className='bad';
tip.innerHTML='用户名不能为空';
return;
}
if(null==ajax)
createajax();
ajax.open("GET","?id="+username,true);
ajax.onreadystatechange=change_tip;
ajax.send(null);
}
function change_tip(){ //状态改变时调用
if(ajax.readyState == 4){
if(ajax.status == 200){
eval("var obj="+ajax.responseText);
if(obj.status===1){
tip.className='ok';
tip.innerHTML=obj.text;
}else{
tip.className='bad';
tip.innerHTML=obj.text;
}
}
}
}
function show_tip(){//获得焦点时调用,提示用户输入规则
var tip=document.getElementById('tip');
tip.className='info';
tip.innerHTML="用户名,4-20位字母或数字,非数字开头";
}
</script>
</head>
<body>
<p>ajax用户名检测<p><hr>
<form name="myform">
用户名 <input type="text" name="username" οnblur="checkname();" οnfοcus="show_tip()">
<span id="tip" class="info">用户名,4-20位字母或数字,非数字开头</span>
</form>
</body>
</html>