使用ajax验证用户名重复
继上次的用户注册登录案例之后，对其中的部分功能再做进一步改进。上一版中用户提交表单后才对用户名进行校验，虽然做了回显，但还是感觉功能弱了些。为了能有更好用户体验，不是在用户提交表单后才给提示，而是在用户输入用户名后就立即对该用户名进行数据库校验，经过晚上的测试现在可以使用纯js版和jquery版。
准备工作，先编写好验证用户名重复的后台Servlet程序，然后在jsp或html中使用js对用户名进行验证，当用户输入用户名文本框推动焦点时立即触发验证。
下面是jquery代码。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>使用ajax进行异步验证</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
body{ font-size:12px;}
table{ font-size:12px;}
table input{ width:120px;}
table em{ color:#ff0000;}
#body{ margin-left:200px; margin-top:220px;}
</style>
<script type="text/javascript" src="Jquery/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#username").focus();
});
var hadoop = function(){
// 异步验证用户是否重复
if($.trim($("#username").val())==""){
$("#message").html("用户名不能为空");
$("#username").focus();
}else{
$.ajax({
type: "post",
url: "dumplicate.do",
data: "username=" + $("#username").val(),
success: function(message){
$("#message").html(message);
}
});
}
};
</script>
</head>
<body>
<div id="body">
<form action="#" method="post">
<table>
<tr>
<td>用户名：</td><td><input type="text" id="username" name="username" onblur="hadoop()" />
</td>
<td>
<em id="message"></em>
</td>
</tr>
<tr>
<td>密码：</td><td colspan="2"><input type="text" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
下面是js版代码。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>使用ajax进行异步验证</title>
<meta http-equiv="content-type" content="text/xml;charset=utf-8" />
<style type="text/css">
body{ font-size:12px;}
table{ font-size:12px;}
table input{ width:120px;font-size:12px;}
table em{ color:#ff0000;}
.tips{ text-align:right;}
#body{ margin-left:200px; margin-top:220px;}
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
document.getElementById("username").focus();
};
var xmlhttp;
function hadoop() {
// 1.创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
// IE7,IE8,FireFox,Mozilla,Safari,Opera
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
// IE6,IE5.5,IE5
var activexName = [ "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP" ];
for ( var i = 0; i < activexName.length; i++) {
try {
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
if (xmlhttp == undefined || xmlhttp == null) {
alert('当前浏览器不支持创建XMLHttpRequest对象');
return;
} //2.注册回调函数
xmlhttp.onreadystatechange = callback;
// 注意方法调用后面不加括号
//xmlhttp.onreadystatechange = callback(); // 获取文本框中输入的内容，经过两次编码防止中文乱码
// 后台使用URLDecoder.decode(username,"utf-8")对username解码
var userName = document.getElementById("username").value;
if(userName==""){
document.getElementById("message").innerHTML="用户名不能为空";
$("#username").focus();
return;
}
userName = encodeURI(encodeURI(userName));
// 3.设置和服务器端交互参数
xmlhttp.open("POST", "${pageContext.request.contextPath }/dumplicate.do?username=" + userName, true); // 4.设置向服务器端发送的数据，启动和服务器端的交互
xmlhttp.send(null);
} function callback() {
// 5 .判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
if (xmlhttp.readyState == 4) {
// 表示和服务器端的交互已经完成
if (xmlhttp.status == 200) {
// 表示服务器的响应代码是200，正确的返回了数据
// 纯文本数据的接受方法
var message = xmlhttp.responseText;
// XML数据对应的DOM对象的接受方法
// 使用的前提是，服务器端需要设置content-type为text/xml
// var domXml = xmlhttp.responseXML; //向div标签中填充文本内容的方法
var div = document.getElementById("message");
if(message=="用户名已被注册"){
document.getElementById("username").focus();
document.getElementById("username").select();
}
div.innerHTML = message;
}
}
}
</script>
</head>
<body>
<div id="body">
<form action="#" method="post">
<table>
<tr>
<td class="tips">用户名：</td>
<td>
<input type="text" id="username" name="username" value="祁连山" onblur="hadoop()" />
</td>
<td>
<em id="message">*</em>
</td>
</tr>
<tr>
<td class="tips">密码：</td><td colspan="2"><input type="text" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
从上面的代码量就可以看出来jquery的强大之处了，所以有空没空多看看jquery，自己会用才是王道。在这里也感谢一位网名叫牛腩的广西南宁朋友提供js版本，jquery版本出自jquery文档，看来还是得多看文档哪。
使用ajax验证用户名重复的更多相关文章
- 使用原生Ajax进行用户名重复的检验
title: 使用原生Ajax进行用户名重复的检验(一) date: 2019-01-21 17:35:15 tags: [JavaScript,Ajax] --- Ajax的复习 距离刚开始学aja ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 利用jQuery实现的Ajax 验证用户名是否存在
异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...
- ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- Ajax验证用户名是否被注册
Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...
- 11.10 （下午）开课二个月零六天（ajax验证用户名，ajax调数据库）
用ajax验证用户名是否可用 testuid.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 基于jQuery实现的Ajax 验证用户名唯一性
基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...
- 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- Ajax验证用户名
用Ajax验证用户名: 接口: get guestbook/index.php m : index a : verifyUserName username : 要验证的用户名 返回 { code : ...
随机推荐
- Spoj 1557 Can you answer these queries II 线段树 随意区间最大子段和 不反复数字
题目链接:点击打开链接 每一个点都是最大值,把一整个序列和都压缩在一个点里. 1.普通的区间求和就是维护2个值,区间和Sum和延迟标志Lazy 2.Old 是该区间里出现过最大的Sum, Oldlaz ...
- ThinkPHP5.0框架开发--第5章 TP5.0 控制器
ThinkPHP5.0框架开发--第5章 TP5.0 控制器 第5章 TP5.0 控制器 ============================================== 上次复习 1.路 ...
- HMM（隐马尔科夫模型）——本质上就是要预测出股市的隐藏状态（牛市、熊市、震荡、反弹等）和他们之间的转移概率
摘自:http://blog.csdn.net/baskbeast/article/details/51218777 可以看 <统计学习方法>里的介绍 举一个日常生活中的例子,我们希望根据 ...
- angular4中日期格式的用法
dateTime: Date; this.dataTime = new Date(); // 获取当前日期 // Wed Apr 18 2018 10:54:47 GMT+0800 (中国标准时间) ...
- [HEOI2016/TJOI2016] 排序 解题报告（二分答案/线段树分裂合并+set）
题目链接: https://www.luogu.org/problemnew/show/P2824 题目描述: 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在 ...
- System.IO.FileLoadException异常
未能加载文件或程序集“NHibernate, Version=4.1.0.4000, Culture=neutral, PublicKeyToken=aa95f207798dfdb4”或它的某一个依赖 ...
- P1776 宝物筛选_NOI导刊2010提高（02）(背包的二进制优化)
题目描述 终于,破解了千年的难题.小FF找到了王室的宝物室,里面堆满了无数价值连城的宝物……这下小FF可发财了,嘎嘎.但是这里的宝物实在是太多了,小FF的采集车似乎装不下那么多宝物.看来小FF只能含泪 ...
- IP地址的正则表达式写法
这里讲的是IPv4的地址格式,总长度 32位=4段*8位,每段之间用.分割, 每段都是0-255之间的十进制数值. 将0-255用正则表达式表示,可以分成一下几块来分别考虑: 取值区间 特点 正则写法 ...
- js正则学习小计
//元字符 {} () ^ $ . ? + //预定义字符 \d \D \w \W \s \S //量词 {n,m} {n} {n,} + ? * //贪婪和惰性 //反向引用 //分组 //候选 / ...
- 用jQuery设置多个css样式
$("#show_one").css({"position":"fixed","top":"0px" ...