利用ajax实现用户名后面给提示是否存在此用户名
实现功能：当输入用户名时，如果此用户名不存在就在用户名后面输出ok，如果存在就输出用户名已存在
思路步骤：1、先建立数据库，存放用户名
2、利用ajax无刷新技术发出请求，ajax把用户名传给数据库，如果数据库中存在输入的名字（或不存在），会输出用户名存在（或ok），ajax在从服务器得到数据显示出来
1、ajax.js
function initXHR(){
//判断浏览器的版本
return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
}
function testXHR(serverUrl,Parms,callBack){
var xhr=initXHR();//初始化XHR
var url=serverUrl+"?"+Parms+"&r="+Math.random();//初始化url。serverUrl传送的文件。Parms参数
xhr.open("GET",url,true);//打开url
xhr.send(null);//发送请求
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
callBack(xhr);//callback回调函数,自动执行,函数执行完后会给主程序一个响应
}
}
}
2、zhuce.php
<script language="javascript" type="text/javascript" src="ajax.js">
</script>//引用ajax
<script language="javascript" type="text/javascript">
function focus_name(){
document.getElementById("username").focus();//获得焦点jQuery 事件 - focus() 方法.当你打开网页时光标会停在用户名这
}
function checkName(){
//通过js获取表单数据,
var text=document.getElementById("username").value;
testXHR("ee.php","username="+text,Method);//testXHR函数应与ajax.js里的函数名保持一致
}
function Method(xhr){//xhr是个保存XMLHttpRequest对象的xhr变量
document.getElementById("checkname").innerHTML+=xhr.responseText;//把值赋给图层
}
</script>
</head>
<body>
<body οnlοad="focus_name()"><!--onload当加载这个页面时会调用这个函数。focus_name()函数就是让光标定位到用户名-->
<center>欢迎注册</center>
<form action="" method="post">
用户名：<input type="text" id="username" name="username" οnblur="checkName()"/><span id="checkname"></span><br />
密码：<input type="password" name="password" /><br />
确认密码：<input type="password" name="password2" /><br />
<input type="submit" value="注册" />
<input type="button" name="cancel" οnclick="" value="取消" />
</form>
3、ee.php
<?php
$link=mysql_connect('localhost','root','123') or die("不能连接");
mysql_select_db('lyb',$link);
mysql_query("set names utf8");
$result = mysql_query("select username from user where username='".$_GET["username"]."'");
if($row = mysql_fetch_row($result)) echo "<font color=red>用户名存在！</font>";
else echo "<font color=green>OK</font>";
?>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
