案例学习笔记：前端：案例_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_用户名异步校验源代码”

黄道婆

发布了106 篇原创文章 · 获赞 4 · 访问量 1万+

私信关注

案例学习笔记：前端：案例_Ajax_用户名异步校验

猜你喜欢