利用ajax判断用户名是否存在

来源：互联网发布：国家文件数据怎么保存编辑：程序博客网时间：2024/06/05 20:29

利用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>//引用ajax

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>

用户名：<input type="text" id="username" name="username" onblur="checkName()"/><span id="checkname"></span><br />

密码：<input type="password" name="password" /><br />

确认密码：<input type="password" name="password2" /><br />

</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>";