JQuery ajax检测重名并进行提示

 

  此处主要是在JAVAWeb项目中利用JQuery AJAX中的$.get()方法以及input标签的两个事件：onkeyup和onblur，实现检测用户名是否重名并进行提示。

  $.get(URL,data,function(data,status,xhr),dataType);

       URL:请求的URL,必填项

       data:连同请求发送到服务器的数据，非必填项

       function(data,status,xhr):请求成功时运行的函数，非必填项

       dataType:规定服务器响应的数据类型，非必填项

 onkeyup:当键盘按键被松开时触发的事件

 onblur:当input失去焦点时触发的事件（此处主要用它来隐藏提示语，可不用）

效果图展示：

             1.初始状态，没有提示语

              

          2.当用户输入用户名时（输入一个数据库中暂未存在的用户名），触发onkeyup事件，进行ajax操作

             

 

          3.当用户输入一个在数据库中已存在的用户名时，同样触发onkeyup事件，进行ajax操作

            

        4.当用户重新输入一个数据库中不存在的用户名时，再次触发onkeyup事件，进行ajax操作

           

       5.当焦点离开该input时，隐藏掉提示语（此处为触发onblur事件，该事件可根据具体需求确定是否设置）

          

 

   1.HTML代码

<input type="text" name="registerName" id="registerName" placeholder="设置您的用户名">
						<span id="tishi1"></span>

 

  2.引入JQuery文件

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

 

 3.JQuery AJAX代码  （获取值，异步传输数据，控制提示语标签的隐藏和展示）

   

<script>
	//先将提示展示出来
	$("#tishi1").show();

	$(function() {
	//当键盘按键被松开时触发事件:通过AJAX将input中的数据传递给后端，在后端验证是否已存在该用户名
		$("#registerName").keyup(
				function() {
					var registerName = $(this).val();
					registerName = $.trim(registerName);
					if (registerName != "") {
						var url = "CheckRegeister.do?";
						registerName = "registerName=" + registerName;
						url = url + registerName;
						//$.get()方法能够返回一个JQuery XMLHttpRequest对象
						var jqxhr = $.get(url, callback);
						//若执行JQuery出现错误则提示错误信息
						//在JQuery3.0以后需要用done()、fail()、alwayls()代替success()、error()、complete();
						jqxhr.fail(function(xhr, error, throwerror) {
							alert("error" + xhr.status + " error=" + error
									+ " throwerror:" + throwerror);
						});
					}
				});
		//当输入注册名的输入框失去焦点后就先隐藏提示语,这个隐藏提示语可根据具体需求决定是否隐藏
		$("#registerName").blur(function cls() {
			$("#tishi1").hide();
		});
	});
	//ajax的回调函数
	function callback(data, status) {
		$("#tishi1").show();
		$("#tishi1").html(data);
	}
</script>

 

 4.Servlet文件代码（调用Service层接口，查询该用户名是否存在，返回结果）

   

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.取值
		String registerName =request.getParameter("registerName");
		 //2.判断，此处用于判断是否已存在该用户
	   IUserService userService = new UserServiceImp();
	   isExist = userService.userAccountIsExist(registerName);
	   System.out.println("registerName"+registerName);
	   request.getSession().setAttribute("REGISTERMSG", "");
	  //3.返回结果
	      if(isExist) {
	    	  response.getWriter().print("<font color='red'>抱歉，该用户名已被注册，请重新设置</font>"); 
	      }else {
	    	  response.getWriter().print("<font color='green'>恭喜，该用户名可用</font>"); 
	      }
	}

  5.数据库查询，此处我采用的是DBUtils(封装了JDBC的代码，简化了DAO层的操作)，仅供参考，可自由发挥

      

	@Override
	public boolean accountIsExist(String account) {
		User user = null;
		conn = DataBaseHelper.getConn();
		ResultSetHandler<User> rsh = new BeanHandler<User>(User.class);	
		String sql = "SELECT * FROM user WHERE account=?";
		try {
	       user =  run.query(conn,sql,rsh,account);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				DbUtils.close(conn);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(user!=null) {
			return true;
		}else {
			return false;
		}
	}