Question

AJAX异步表单验证用户名是否存在(jsp+sevlet实现)

代码尽可能简单易懂

Answer 1

AJAX异步校验表单输入的用户名的实现。
jsp中的ajax校验是放在js中做的，如下：
<script type="text/javascript">
function init(){
document.getElementById("username").focus();
}
function validate(userfield) {
if (trim(userfield.value).length != 0) {
var xmlHttpRequest = null;
var url = "../AccountIsExistServlet?account=" + userfield.value;
var usermsg = document.getElementById("usermsg");
if (window.XMLHttpRequest) {//表示当前浏览器不是IE
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpRequest.open("GET", url, true);//设置请求方式为GET，设置请求的URL，设置为异步提交
xmlHttpRequest.onreadystatechange = function(){//将方法地址复制给onreadystatechange属性
if(xmlHttpRequest.readyState == 4){//Ajax引擎状态为成功
if(xmlHttpRequest.status == 200){//HTTP协议状态为成功
if(trim(xmlHttpRequest.responseText) != ""){
usermsg.innerHTML = "<font color='red'>" + trim(xmlHttpRequest.responseText) + "</font>";
userfield.focus();
}else{
usermsg.innerHTML = "恭喜您，用户名可以使用。 ";
}
}else{
alert("请求失败，错误码=" + xmlHttp.status);
}
}
};
xmlHttpRequest.send(null);//将设置信息发送到Ajax引擎
}else{
usermsg.innerHTML = "";
}
}

Answer 2

$(function(){

$("#txtEmail").blur(function(){
//检查是否为空
var myreg = /(\S)+[@]{1}(\S)+[.]{1}(\w)+/;
if($("#txtEmail").val()==""){
$("#email_info").css("color","red");
$("#email_info").text("邮箱为空！");
return;
}else if(!myreg.test($("#txtEmail").val())){
$("#email_info").css("color","red");
$("#email_info").text("邮箱无效！");
return;
}
$("#email_info").text("正在检测....");
//发送Ajax请求
$.post(
"valid!emailValid.action?dt="+new Date().getTime(),
{"email": $("#txtEmail").val()},
function(data){
//alert(data.ok);
if(data.ok){
//alert("......");
em=true;
$("#email_info").css("color","green");
$("#email_info").text("可以注册！");
}else{
$("#email_info").css("color","red");
$("#email_info").text("已被注册邮箱！");
em=false;

}
}
),
"json"
});
});

public String emailValid(){
UserDAO udao =(UserDAO) DaoFactory.getDaoinstance(UserDAO.class);
User user = udao.findByEmail(email);
if(user==null){
ok = true;
}else{
ok = false;
}
return "success";
}