版权声明:本文为博主原创文章,未经博主允许不得转载。https://blog.csdn.net/qq_40348465/article/details/83217840
此处主要是在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;
}
}