ajax实现简单注册验证

Ajax的局部刷新对于提升用户体验性的确挺给力的，这里用一个日常开发中常见的注册场景来说明ajax的使用：当输入用户名之后及时给出用户名是否已存在的提示。

 

因为原生的ajax需要手动编码进行浏览器兼容性的处理，比较繁琐，所以更好的选择是用jQuery的ajax进行操作，jQuery做了高度封装，作为程序员来讲不用再考虑浏览器差异，可以把主要精力放在业务逻辑处理上。

 

不多说，在eclipse中新建一个web工程，在webroot下新建一个文件夹，导入jQuery的脚本文件。

页面jQuery代码：

<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>

<script type="text/javascript">

 $(function(){

 $("#username").blur(function(){

     var username = $("#username").val();

    if(username.length < 1){

      $("#msg").html("用户名不能为空");

      return ; //不触发ajax

    }

 $.post("/ajaxWAR/register",{"uname":username},function(data){

   $("#msg").html("<font size='5' style='color:red'>"+data+"</font>");

  });

 });

 });

</script>

代码解释：用户在表单中输入用户名之后，当用户名失去焦点，则会触发ajax去后台验证该用户名在数据库中是否已经存在，验证的结果会及时通过回调函数响应在页面元素<span id="msg">上，做到数据的局部刷新。

 

Form表单：

 <form action="#none" method="post">

   用户名:<input type="text" name="username" id="username" /> <span id="msg"></span></br>

 密  码:  <input type="password" name="password" id="password" /></br>

   <input type="submit" id="log" value="登陆"/>

   <input type="submit" id="reg" value="注册"/>

   <input type="reset" value="重置"/>

  </form>

 

后台servlet：

@WebServlet("/register")

public class registerServlet extends HttpServlet {

@Override

protected void service(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

String uname = request.getParameter("uname");

UserDAO userDAO = new UserDAOImpl();

User user = userDAO.findByName(uname);

 PrintWriter pw = response.getWriter();

if (user == null) {

pw.print("恭喜你，该用户名可以注册!!!");

} else {

pw.print("对不起，该用户名已存在!!!");

}

}

}

可以看到，该servlet的主要工作就是调用dao去进行数据库查询，并把验证结果通过打印流发送回前端页面。

 

Dao代码：

public User findByName(String name) {

Connection connection = DBUtil.getConnection(); 

PreparedStatement pstm = null;

ResultSet rs = null;

User user = null;

String sql = "select * from user where username = ?";

try {

pstm = connection.prepareStatement(sql); // 

pstm.setString(1, name); //设置参数

rs = pstm.executeQuery(); // 执行查询

 

// 遍历结果集

while (rs.next()) {

user = new User(); 

String username = rs.getString("name");

int id = rs.getInt("id");

String password = rs.getString("password");

user.setName(username);

user.setId(id);

user.setPassword(password);

}

} catch (SQLException e) {

e.printStackTrace();

} finally {

DBUtil.close(rs, pstm, connection); // 关闭资源

}

return user;

}

 

测试截图：

 

            图1用户表已存在记录

 

 

         图2 输入用户表中不存在的记录

 

 

       图3 输入用户表中已存在记录

 

至此，一个最简单的ajax局部刷新小实例就完成了。可以看到，从后台返回的用户名验证信息只是刷新到页面中的一个元素中，并没有刷新整个页面，浏览器地址栏的地址一直没变。