首页 > 代码库 > AJAX异步校验

AJAX异步校验

2024-08-28 09:42:19   218人阅读

前台JS代码
/*异步验证用户名的输入格式以及是否存在*/
function CheckUsername(){
     /*取到用户名输入框*/
     var nametxt = document.getElementById("username");
     /*获取输入的用户名值*/
     var username = nametxt.value;
     /*获取到装错误信息的span框*/
     var sp = document.getElementById("usernameError");
     var regex = /^[a-z0-9]{4,12}$/i;
     /*创建异步函数*/
     var xhr = createXmlHttp();
     /*设置监听*/
     xhr.onreadystatechange = function()
     {
          if(xhr.readyState == 4){
              if(xhr.status == 200){
                   /*为信息提示框赋文本*/
                   sp.innerHTML = xhr.responseText;
                   /*为信息提示框赋样式*/
                   sp.className = "infoError";
              }
          }
     }
     /*打开链接 · 不加时间戳则会引起浏览器的缓存*/
     xhr.open("GET", "${pageContext.request.contextPath}/user_FindByName.action?time="+new Date().getTime()+"&username="+username, true);
     /*发送*/
     xhr.send();
}
function createXmlHttp(){
     var xmlHttp;
     try{//Firefox, Opera8.0+, Safari
          xmlHttp = new XMLHttpRequest();
     } catch(e){
          try {//IE
              xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
          } catch (e) {}
     }
     return xmlHttp;
}
 
后台action代码
     /**
     * AJAX异步校验用户名
     * @return String
     * @throws IOException
     */
     public String FindByName() throws IOException{
          /*调用service进行查询*/
          User existUser = userService.FindByUsername(user.getUsername());
          /*获取response对象，向页面输出信息*/
          HttpServletResponse response = ServletActionContext.getResponse();
          response.setContentType("text/html;charset=UTF-8");
          /*判断是否为空*/
          if(existUser != null){
              //用户名已经存在，不能注册
              /*有异常则向上抛出*/
              response.getWriter().println("<font color=‘red‘>用户名已存在,不可用！</font>");
          } else{
              //用户名不存在，可以注册
              response.getWriter().println("<font color=‘green‘>用户名可以使用！</font>");
          }
          /*AJAX操作，不需要页面跳转*/
          return NONE;
     }
 
 
 
 
 
 
 

AJAX异步校验


联系
我们