使用ajax验证用户名是否存在，并给出是否可用提示

最新推荐文章于 2019-08-22 10:48:12 发布

zzhlovewy111

最新推荐文章于 2019-08-22 10:48:12 发布

阅读量362

点赞数

文章标签： ajax url 服务器 function 引擎 fun

本文链接：https://blog.csdn.net/zzhlovewy111/article/details/6519646

版权

大家都知道我们经常注册一些网站的时候用户名是一个非常重要的问题。那种效果我感觉的好！！今天分享一下我学习的简单用户名验证！！

原文：http://www.3gput.com/forum.php?mod=viewthread&tid=139

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用户注册</title>
</head>
<body>
<form action="" name="form1" method="post">
用户名：<input type="text" name="username" Xοnblur="checkUser()" /><div id="info"></div><br>
密码：<input type="password" name="password" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
<script Xlanguage="javascript" type="text/javascript">
function checkUser(){
//定义url
var url="./checkUser.php";
//定义参数
var params="user="+$$(document.form1.username.value);
//执行调用，调用ajax引擎处理数据
// 链接变量函数名
ajaxget(url,params,aaa1);
}
//定义事件处理函数
function aaa1(xhr){
//获取div对象
var div=document.getElementById("info");
if(xhr.responseText=="no"){
//根据结果输出相应的提示信息,提示不可用
div.innerHTML="<img src='../images/fail.png' width='50' height='50'><font color='red'>对不起，用户名已经存在</font>";
}else{
//表明用户名可用
div.innerHTML="<img src='../images/ok.jpg' width='50' height='50'><font color='green'>恭喜您，用户名可以使用</font>";
}
}
//ajax引擎函数
function ajaxget(url,params,fun_name){
//初始化Ajax引擎
var xhr = new XMLHttpRequest();
var url1=url+"?"+params+"&r="+Math.random();
//创建一个新的请求
xhr.open("get",url1,true);
//发送请求，并且接收服务器回应
xhr.send(null);
//处理服务器返回的结果
xhr.Xonreadystatechange=function (){
//判断服务器交互状态值是否为4，为4表明交互完成
if(xhr.readyState==4){
//调用另外一个时间处理的方法
fun_name(xhr);
}
}
}
//转码函数
function $$(str){
return encodeURI(str);
}
</script>