AJAX应用实例之检测用户名是否唯一(实例代码)
先给大家展示下效果图，然后再给大家撸代码，效果图如下所示：
下面写一个简单的例子，检测用户名是否唯一（直接撸代码）：
前端界面：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>检测用户名是否唯一</title>
<style type="text/css">
<!--
#toolTip {
position:absolute;
left:331px;
top:39px;
width:98px;
height:48px;
padding-top:45px;
padding-left:25px;
padding-right:25px;
z-index:1;
display:none;
color:red;
background-image: url(images/tooltip.jpg);
}
-->
</style>
</head>
<body style="margin: 0px;">
<form method="post" action="" name="form1">
<table width="509" height="352" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg.gif">
<tr>
<td height="54"> </td>
</tr>
<tr>
<td height="253" valign="top">
<div style="position:absolute;">
<table width="100%" height="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="18%" height="54" align="right" style="color:#8e6723 "><b>用户名：</b></td>
<td width="49%"><input name="username" type="text" id="username" size="32"></td>
<td width="33%"><img src="images/checkBt.jpg" width="104" height="23" style="cursor:hand;" onClick="checkUser(form1.username);"></td>
</tr>
<tr>
<td height="51" align="right" style="color:#8e6723 "><b>密码：</b></td>
<td><input name="pwd1" type="password" id="pwd1" size="35"></td>
<td rowspan="2"> <div id="toolTip"></div></td>
</tr>
<tr>
<td height="56" align="right" style="color:#8e6723 "><b>确认密码：</b></td>
<td><input name="pwd2" type="password" id="pwd2" size="35"></td>
</tr>
<tr>
<td height="55" align="right" style="color:#8e6723 "><b>E-mail：</b></td>
<td colspan="2"><input name="email" type="text" id="email" size="45"></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input type="image" name="imageField" src="images/registerBt.jpg"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
AJAX文件：
<script language="javascript">
function createRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // 非IE浏览器
http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象
} else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {}
}
}
if (!http_request) {
alert("不能创建XMLHttpRequest对象实例！");
return false;
}
http_request.onreadystatechange = getResult; //调用返回结果处理函数
http_request.open('GET', url, true); //创建与服务器的连接
http_request.send(null); //向服务器发送请求
}
function getResult() {
if (http_request.readyState == 4) { // 判断请求状态
if (http_request.status == 200) { // 请求成功，开始处理返回结果
document.getElementById("toolTip").innerHTML=http_request.responseText; //设置提示内容
document.getElementById("toolTip").style.display="block"; //显示提示框
} else { // 请求页面有错误
alert("您所请求的页面有错误！");
}
}
}
function checkUser(userName){
if(userName.value==""){
alert("请输入用户名！");userName.focus();return;
}else{
createRequest('checkUser.jsp?user='+userName.value);
}
}
</script>
jsp文件：
此例并没有连接数据库，只是用数组简单表示注册过的用户。
<%@ page language="java" import="java.util.*" pageEncoding="GB18030" %>
<%
String[] userList={"明日科技","mr","mrsoft","wgh"}; //创建一个一维数组
String user=new String(request.getParameter("user").getBytes("ISO-8859-1"),"GB18030"); //获取用户名
Arrays.sort(userList); //对数组排序
int result=Arrays.binarySearch(userList,user); //搜索数组
if(result>-1){
out.println("很抱歉，该用户名已经被注册！"); //输出检测结果
}else{
out.println("恭喜您，该用户名没有被注册！"); //输出检测结果
}
%>
总结
以上所述是小编给大家介绍的AJAX应用实例之检测用户名是否唯一(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）
其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal
-
jquery ajax 检测用户注册时用户名是否存在
首先需要一个添加年级的页面,暂时叫grade.htm 这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件). 下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的. grade.htm 复制代码 代码如下: <input type="text" size="6" name="NAME" id="NAME"/><
-
使用Ajax实时检测"用户名、邮箱等"是否已经存在
一个网站采用Ajax技术,不仅可以改善网站的用户体验性,而且大大节约了宝贵的带宽,减轻了服务器负荷(不再需要交互整个网页内容,而是局部). 今天分享一个"利用Ajax技术来检测用户名是否存在"的例子. 利用Ajax技术来检测用户名是否存在的原理流程图: 最终结果截图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
-
PHP＋AJAX实现无刷新注册（带用户名实时检测）
很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是"您的用户名已被使用"或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时检测用户信息的简单注册程序,希望对大家有所帮助.好的,先看注册界面代码: <table width="831" border="0" align="
-
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
PHP+Ajax检测用户名或邮件注册时是否已经存在是论坛或会员系统中常见的一个重要功能.本文就以实例形式简单描述这一功能的实现方法.具体步骤如下: 一.PHP检测页面 check.php页面代码如下: <script type="text/javascript" src="jiance.js"></script> <form name="myform" action="" method="
-
ajax 检测用户名是否被占用
复制代码 代码如下: //检测用户名是否被占用 function GetO(){ var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { ajax = false; } } if (!ajax && typeof X
-
AJAX应用实例之检测用户名是否唯一(实例代码)
先给大家展示下效果图,然后再给大家撸代码,效果图如下所示: 下面写一个简单的例子,检测用户名是否唯一(直接撸代码): 前端界面: <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transition
-
AJAX实现无刷新检测用户名功能
先来看看原理图 register.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ajax无刷新检测</title> <style type="text/css"> body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{l
-
JQuery Ajax如何实现注册检测用户名
Ajax(无需等待直接向服务器发起请求) (Asynchronous Javascript And Xml) :异步的 Google创新的一种js技术 方法一:比较原始没有封装的方法: //核对用户名是否可用 var xmlhttp = null; function checkUser(userName) { if (xmlhttp == null) { xmlhttp = new XMLHttpRequest();//第一步:创建一步通信对象 } //第二步:设定回调函数 xmlhttp.on
-
利用Ajax检测用户名是否被占用的完整实例
适合人群:Ajax和jQuery入门 采用Ajax实现用户名验证 使用jQuery给出提示信息 用户注册的时候,使用Ajax实现检测用户名是否已经被注册过,很多细节没有实现,给大家做个简单普及. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//
-
基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/jquery_aj
-
PHP+Ajax实现的检测用户名功能简单示例
本文实例讲述了PHP+Ajax实现的检测用户名功能.分享给大家供大家参考,具体如下: 一 代码 fun.js: function chkUsername(username){ if(username==''){ //判断用户名是否为空 alert('请输入用户名!'); }else{ var xmlObj; //定义XMLHttpRequest对象 if(window.ActiveXObject){ //如果是浏览器支持ActiveXObjext则创建ActiveXObject对象 xmlObj
-
AJAX检测用户名是否存在的方法
本文实例为大家分享了AJAX检测用户名是否存在的具体代码,供大家参考,具体内容如下 vscode: index: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>用户注册</h2> <f
-
Ajax邮箱、用户名唯一性验证实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> $(function () { $("#txtEmail").blur(function () { $.ajax({ type: "post", url: "reg.ashx?email=" + $.trim($("#txtEmail").val()) + "&