案例学习笔记:前端:案例_Ajax_用户名异步校验
案例_Ajax_用户名异步校验
----
一、需求描述:
用户在用户名区域录入完tom之后,光标定位到密码框区域,向服务端发送一个Ajax请求,服务端接收到请求之后,向客户端响应用户名已经存在。
用户在用户名区域录入完mary之后,光标定位到密码框区域,向服务端发送一个Ajax请求,服务端接收到请求之后,向客户端响应用户名可以注册。
二、搭建环境
1.建立项目:New Module,选Java Enterprise,选JavaEE6,选Web application
2.建立数据仓库
3.建立各种package
4.导入JAR包
5.导入配置文件,修改
6.导入工具类
7.导入注册页面
三、核心代码:
1.注册页面 register.html
2.servlet代码 UserServlet.java
四、核心代码片段
//file name: register.html
<form class="form-horizontal" style="margin-top:5px;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" placeholder="请输入用户名" />
<span id="usernameSpan"></span>
</div>
</div>
<script>
function myTrim(str){
//正则表达式
}
//页面加载完毕之后,为id为username的文本输入框绑定失去焦点事件
$(function(){
//为id为username的文本输入框绑定失去焦点事件
$("#username").blur(function(){
//失去焦点的代码
//获取用户录入用户名,截取前后的空格
//如果用户名不是空字符串,向服务端发起ajax请求
var vv=$("#username").val();
var username=$.trim(vv);
console.log(username);
if(username!=""){
$.get("/day18_anli01/UserServlet",{"username":username},function(data){
//获取到的数据填充到id为usernameSpan区域
//$("#usernameSpan").html(data);
if(data=="success"){
//如果成功,控制id为usernameSpan区域中的文字颜色为绿色 , 注册按钮可用
$("#usernameSpan").html("用户名可以注册");
$("#usernameSpan").css("color","green");
$("input[value='注册']").prop("disabled",false);
}else{
//如果失败,控制id为usernameSpan区域中的文字颜色为红色 , 注册按钮不可用
$("#usernameSpan").html("用户名已经存在");
$("#usernameSpan").css("color","red");
$("input[value='注册']").prop("disabled",true);
}
});
}
});
});
</script>
</form>
//file name: UserServlet.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置本次响应内容类型
//由于本次响应的内容只有纯字符串,可以在tomcat/conf/web.xml 搜索到text格式设置text/plain
response.setContentType("text/plain;charset=utf-8");
//获取到打印流
PrintWriter out = response.getWriter();
//获取客户端的账户
String username = request.getParameter("username");
//调用业务层查询指定用户是否存在功能
UserService UserService=new UserService();
User uu=UserService.findUserByUserName(username);
//向客户端响应用户是否存在 fail success
if(null==uu){
//不存在,可以注册
out.print("success");
}else{
//存在,不可以注册
out.print("fail");
}
}
全部代码和sql语句已上传到资源里。资源名称:“案例_Ajax_用户名异步校验 源代码”