学习Java的日子

JavaEE成长记

异步请求之用户注册

什么是AJAX:
* AJAX:异步的 JavaScript And XML.
* 使用的是老的技术,用的是新的思想.
了解同步和异步的区别:
* 参考图一:
AJAX的功能:完成页面的局部刷新,不中断用户的体验.
重点内容
步骤分析:
【步骤一】:创建表和数据库:
【步骤二】:设计一个注册页面
【步骤三】:在用户名的文本框中使用onblur事件触发一个函数.
【步骤四】:使用JQ的AJAX完成异步操作,将文本框的值传入到Servlet中.
【步骤五】:Servlet中根据传入的用户名去数据库进行查询.
【步骤六】:查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.
原生JavaScript实现请往前翻<——————————-
【前端代码:页面+jQuery异步请求】:


<script src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script>
   $(function(){
       $("#subt").prop("disabled",false);
       $("#uname").blur(function(){
           var unameValue=$("#uname").val();
           $("#span_uname").html("");
           if(unameValue!=""||unameValue.length!=0){
               $.post("${pageContext.request.contextPath}/UserServlet",{"method":"checkUserName","uname":unameValue},function(data){
                   if(data=="0"){
                       $("#span_uname").html("<font color='green'>用户名不存在可以注册</font>");
                       $("#subt").prop("disabled",false);
                   }else if(data=="1"){
                       $("#span_uname").html("<font color='red'>用户名已经存在,请重新填写!</font>");
                       $("#subt").prop("disabled",true);
                   }
               });
           }

       });

   });
</script>
</head>
<body>
<fieldset><legend><font class="regist">用户注册</font></legend>


          <font color="red">${msg }</font>

        <form style="margin-top:5px;" action="${ pageContext.request.contextPath }/UserServlet" method="post">
             <input type="hidden" name="method" value="regist" >
             <div>

                <div>
                  <label>用&nbsp;户&nbsp;名:</label>&nbsp;&nbsp;<input type="text" id="uname" name="uname" value="${param.uname }"/> <span id="span_uname"></span>
                </div>

              </div>
               <div>

                <div >
                  <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>&nbsp;&nbsp;<input type="password" id="inputPassword3" name="pwd" value="${param.pwd }">
                </div>
              </div>


               <div>

                <div>
                  <label>确认密码:</label>&nbsp;<input type="password" id="confirmpwd" name="repwd">
                </div>
              </div>
              <div>

                <div>
                  <label>&nbsp;E-mail&nbsp;:</label>&nbsp;&nbsp;<input type="text" id="inputEmail3" name="email" value="${param.email }"/>
                </div>
              </div>
             <div>

                <div class="col-sm-6">
                  <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label>&nbsp;&nbsp;<input type="text" id="usercaption" name="name" value="${param.name }"/>
                </div>
              </div>

              <div>  

              <div>
                <label>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</label>&nbsp;&nbsp; <label>

              <input type="radio" name="sex" id="inlineRadio1" value="1" <c:if test="${param.sex ne 0 }">checked</c:if>> 男
            </label>
            <label>
              <input type="radio" name="sex" id="inlineRadio2" value="0" <c:if test="${param.sex eq 0 }">checked</c:if>> 女
            </label>
            </div>
              </div>    

             <div>

                <div>
                  <label>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:</label>&nbsp;&nbsp;<input type="text" name="telephone" value="${param.telephone }"/>            
                </div>
              </div>    

              <div>
                <div>
                  <input type="submit"  id="subt" value="注册" border="0"/>
                </div>
              </div>
            </form>


    </fieldset>
</body>

【Java关键代码的实现】:


    public String regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String path="/success.jsp";
        User u=new User();
        try {
            BeanUtils.populate(u, request.getParameterMap());
            UserService service=new UserService();
            service.regist(u);  
        } catch (IllegalAccessException|InvocationTargetException | SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();

            request.setAttribute("msg","注册失败,重新填写");
            path="/";
        }
        return path;
    }


    public String checkUserName(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

         String uname=request.getParameter("uname");
         UserService service=new UserService();
         try {
            User existsUser=service.checkUserName(uname);
            if(existsUser==null){
                response.getWriter().print("0");
            }else{
                response.getWriter().print("1");
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }   
        return null;
    }

baseServlet:

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");

        String methodName=request.getParameter("method");
        if(methodName==null||"".equals(methodName)){
            response.getWriter().println("不存在的操作!!!");
            return;
        }

        Class cls=this.getClass();
        try {
            Method method=cls.getMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
            String path=(String)method.invoke(this, request,response);
            if(path!=null){
                request.getRequestDispatcher(path).forward(request, response);
            }
        } catch (NoSuchMethodException | SecurityException | IllegalAccessException | IllegalArgumentException | InvocationTargetException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

阅读更多
个人分类: JavaScript Java MySql
想对作者说点什么? 我来说一句

jquery异步请求例子

2009年09月03日 3.58MB 下载

Asp.net增删改查+异步请求

2014年06月05日 122KB 下载

android 异步请求

2013年05月08日 584KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭