view层：前台页面 UserInfoAdd4JSAjax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户信息新增</title> <!-- Bootstrap core CSS --> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/bootstrap.css" rel="stylesheet"> <!--external css--> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/font-awesome/css/font-awesome.css" rel="stylesheet" /> <!-- Custom styles for this template --> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style.css" rel="stylesheet"> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style-responsive.css" rel="stylesheet"> <![endif]--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script> //用户名 失去焦点 发送ajax请求 function checkUsername(obj) { //alert(obj.value); //创建核心对象 xmlhttp = null; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhtto = new ActiveXObject("Microsoft.XMLHTTP"); } //编写回调函数 xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ //alert(xmlhttp.responseText); if(xmlhttp.responseText==1){ $("#usernameMessage").html("<font color='green'>用户名可以注册</font>"); $("#registUserinfo").attr("disabled",false); //document.getElementById("usernameMessage").innerHTML="<font color='green'>用户名可以注册</font>"; }else{ //document.getElementById("usernameMessage").innerHTML="<font color='red'>用户名已经被注册</font>"; //document.getElementById("registUserinfo").disabled=true; $("#usernameMessage").html("<font color='red'>用户名已经被注册</font>"); $("#registUserinfo").attr("disabled",true); //$("#registUserinfo"). } } } //open操作 xmlhttp.open("GET","${pageContext.request.contextPath}/CheckUsername4Ajax?username=" + obj.value); //send操作 xmlhttp.send(); } </script> </head> <body> <section id="container" > <section class="wrapper"> <!-- INLINE FORM ELELEMNTS --> <div class="row mt" style="padding-left: 500px"> <div class="col-lg-6"> <div class="form-panel" > <h4 class="mb"><i class="fa fa-angle-right"></i> 请输入您的注册信息</h4> <form class="form-inline" role="form" action="${pageContext.servletContext.contextPath}/AddUserInfo" method="get"> <div class="form-group" style="margin: 2px 50px "> <label class="sr-only" for="exampleInputUsername2">UserName</label> <input type="text" name="user_name" class="form-control" id="exampleInputUsername2" placeholder="Enter UserName" style="width:300px;" onblur="checkUsername(this)" > <span id="usernameMessage"></font></span> </div> <div class="form-group" style="margin: 2px 50px "> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" name="user_password" class="form-control" id="exampleInputPassword2" placeholder="Password" style="width:300px;"> </div> <div class="form-group" style="margin: 2px 50px "> <label class="sr-only" for="exampleInputCreateTime">CreateTime</label> <input type="date" name="user_createtime" class="form-control" id="exampleInputCreateTime" placeholder="注册时间" style="width:300px;"> </div> <button type="submit" class="btn btn-theme" id="registUserinfo">注册</button> </form> </div><!-- /form-panel --> </div><!-- /col-lg-12 --> </div><!-- /row --> </section><! --/wrapper --> </section><!-- /MAIN CONTENT --> <!-- js placed at the end of the document so the pages load faster --> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap.min.js"></script> <script class="include" type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.dcjqaccordion.2.7.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.scrollTo.min.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.nicescroll.js" type="text/javascript"></script> <!--common script for all pages--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/common-scripts.js"></script> <!--script for this page--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery-ui-1.9.2.custom.min.js"></script> <!--custom switch--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-switch.js"></script> <!--custom tagsinput--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.tagsinput.js"></script> <script type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/form-component.js"></script> </body> </html>
service层 CheckUsername4Ajax CheckUsername4Ajax Servlet
package com.mwb.control; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.mwb.bean.UserInfo; import com.mwb.model.UserInfoModel; import com.mwb.utils.EasyFactory; /** * 原生的Js方式 * 通过Ajax 检查用户名是否可以使用 */ @WebServlet("/CheckUsername4Ajax") public class CheckUsername4Ajax extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String username = request.getParameter("username"); //String un = new String(username.getBytes("iso-8859-1"),"utf-8"); System.out.println("在CheckUsername4Ajax 中 打印 前台写入的注册用户名 " + username); List<UserInfo> list = EasyFactory.getNewInstance(UserInfoModel.class).queryUserInfoByParams(username); System.out.println("在CheckUsername4Ajax 中 打印 查询到的list集合 " + list.size()); if(list.size()>0) { //说明用户名已经被占用 不能注册 response.getWriter().println("0"); }else { //用户名没有被占用可以注册 response.getWriter().println("1"); } } }
Model层 （使用DBUtils）
package com.mwb.model; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.sql.DataSource; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.ResultSetHandler; import org.apache.commons.dbutils.handlers.BeanListHandler; import org.apache.commons.dbutils.handlers.ScalarHandler; import com.mwb.bean.PageBean; import com.mwb.bean.UserInfo; import com.mwb.db.DBCPDataSource; import com.mwb.db.DBProvider; import com.mwb.utils.EasyFactory; import com.mwb.utils.MyUtils; import sun.security.pkcs11.Secmod.DbMode; public class UserInfoModel { public List<UserInfo> queryUserInfoByParams(String username){ List<Object> list = new ArrayList<Object>(); String strSql = "select * from tuserinfo where user_name = ?"; List<UserInfo> lst = null; if(username!=null && !username.equals("")) { lst = EasyFactory.getNewInstance(DBProvider.class).query(strSql, new BeanListHandler<UserInfo>(UserInfo.class), username); }else { System.err.println("查询的用户名为null"); } return lst; } }展示效果
当用户名已经被注册时 显示提示信息并且将注册按钮不可点击
当用户名未被使用 可以注册时 显示信息并且注册按钮可以点击
前台页面 UserInfoAdd4JQAjax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户信息新增</title> <!-- Bootstrap core CSS --> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/bootstrap.css" rel="stylesheet"> <!--external css--> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/font-awesome/css/font-awesome.css" rel="stylesheet" /> <!-- Custom styles for this template --> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style.css" rel="stylesheet"> <link href="${pageContext.servletContext.contextPath}/static/plugins/assets/css/style-responsive.css" rel="stylesheet"> <![endif]--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> <script> //使用Jqery的方式 请求Ajax 判断用户名是否已经被注册 $(function(){ //给username派发一个失去焦点事件 $("#exampleInputUsername2").blur(function(){ //获取输入的值 var $value = $(this).val(); //alert($value); $.get("${pageContext.request.contextPath}/CheckUsername4Ajax",{"username":$value},function(d){ //alert(d); //设置一些操作 if(d==1){ $("#usernameMessage").html("<font color='green'>用户名可以注册</font>"); $("#registUserinfo").attr("disabled",false); }else{ $("#usernameMessage").html("<font color='red'>用户名已经被注册</font>"); $("#registUserinfo").attr("disabled",true); } },"json"); }); }) </script> </head> <body> <section id="container" > <section class="wrapper"> <!-- INLINE FORM ELELEMNTS --> <div class="row mt" style="padding-left: 500px"> <div class="col-lg-6"> <div class="form-panel" > <h4 class="mb"><i class="fa fa-angle-right"></i> 请输入您的注册信息</h4> <form class="form-inline" role="form" action="${pageContext.servletContext.contextPath}/AddUserInfo" method="get"> <div class="form-group" style="margin: 2px 50px "> <label class="sr-only" for="exampleInputUsername2">UserName</label> <input type="text" name="user_name" class="form-control" id="exampleInputUsername2" placeholder="Enter UserName" style="width:300px;" > <span id="usernameMessage"></font></span> </div> <div class="form-group" style="margin: 2px 50px "> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" name="user_password" class="form-control" id="exampleInputPassword2" placeholder="Password" style="width:300px;"> </div> <div class="form-group" style="margin: 2px 50px "> <label class="sr-only" for="exampleInputCreateTime">CreateTime</label> <input type="date" name="user_createtime" class="form-control" id="exampleInputCreateTime" placeholder="注册时间" style="width:300px;"> </div> <button type="submit" class="btn btn-theme" id="registUserinfo">注册</button> </form> </div><!-- /form-panel --> </div><!-- /col-lg-12 --> </div><!-- /row --> </section><! --/wrapper --> </section><!-- /MAIN CONTENT --> <!-- js placed at the end of the document so the pages load faster --> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap.min.js"></script> <script class="include" type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.dcjqaccordion.2.7.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.scrollTo.min.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.nicescroll.js" type="text/javascript"></script> <!--common script for all pages--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/common-scripts.js"></script> <!--script for this page--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery-ui-1.9.2.custom.min.js"></script> <!--custom switch--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-switch.js"></script> <!--custom tagsinput--> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/jquery.tagsinput.js"></script> <script type="text/javascript" src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script> <script src="${pageContext.servletContext.contextPath}/static/plugins/assets/js/form-component.js"></script> </body> </html>
