现在很多的网站,多支持用户名不能重复的功能,即在用户注册时需要验证,验证其用户名不能重复使用,这样用户名其实也成为了唯一的主键,方便了项目后面许许多多的开发。 步骤:
编写jsp页面 <div > <input type="text" placeholder="用户名" name="name" onblur="checkName(this.value)" /> <span id="nameTip" style="color: red;"></span> </div>2.编写servlet查询数据库是否存在相同用户名
package cn.com.mp.back.servlet; import java.io.IOException; 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 cn.com.mp.utils.DbUtil; @WebServlet("/CheckUserNameServlet") public class CheckUserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; public CheckUserNameServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { DbUtil db=new DbUtil(); //得到请求参数 String name=request.getParameter("name").toString(); System.out.println(name+"CheckUserNameServlet"); //查询数据库 String sql="select count(*) as size from users where name=?"; int result=Integer.parseInt(db.query(sql, new Object[]{name}).get(0).get("size").toString()); if(result>0){ response.getWriter().print("1"); }else{ response.getWriter().print("0"); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }3.编写JavaScript实现ajax 由response得到ajax数据有两种形式:
xml形式: servlet中response输出的方式不同,以键值对的形式将数据封装,得到的方式为xmlHttp.responseXMLtext形式 servlet中直接以response.getWriter().print(“”)输出,得到的方式为xmlHttp.responseText <script type="text/javascript"> //封装生成xmlHttp对象 var xmlHttp; function getXMLHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return new ActiveXObject("Microsoft.XMLHTTP"); } } //Ajax得到用户名 function checkName(name) { //1.生成xmlHttp对象 xmlHttp = getXMLHttpRequest(); //2.设置请求参数(method,url,async) xmlHttp.open("Get", "../../CheckUserNameServlet?name="+name, true); //3.监听服务器返回的数据 xmlHttp.onreadystatechange = checkNameCallBack; //4.发送请求 xmlHttp.send(); } //3.编写验证用户名的回调函数 function checkNameCallBack() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //接收服务器返回的数据 var text = xmlHttp.responseText; if("0"!=text){ document.getElementById("nameTip").innerText="用户名已存在,请重新输入"; }else{ document.getElementById("nameTip").innerText=""; } } } </script>4.结果 使用封装提示信息。
以上为笔者学习记录,若有不正确之处,还请指教!