使用Ajax验证用户名是否存在

现在很多的网站，多支持用户名不能重复的功能，即在用户注册时需要验证，验证其用户名不能重复使用，这样用户名其实也成为了唯一的主键，方便了项目后面许许多多的开发。
步骤：

1. 编写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.responseXML
• text形式
  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.结果


使用封装提示信息。

以上为笔者学习记录，若有不正确之处，还请指教！

转载于:https://my.oschina.net/u/3077763/blog/1545557