Ajax使用Demo---异步校验用户名是否存在
2019-03-22 本文已影响0人
itzhouq的笔记
前台的页面校验中Ajax使用广泛，Ajax能在不更新整个网页的前提下维护数据。这使得web应用程序更为迅捷地回应用户动作，并避免了网络上发送那些没有改变得信息。
<-- more -->
jQuery封装后的Ajax操作方法简洁，功能强大，实际开发中经常用到的有三种。get、post和ajax，这里使用post做一个小demo。
1. 前台页面
写一个前台页面，用来校验用户在文本框中输入的用户名
前台页面
2. Ajax异步校验
根据jQuery的Ajax异步请求访问数据库，根据数据库返回的结果判断能否使用用户输入的用户名。
3. 代码
- index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxDemo</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//为输入框绑定事件
$("#username").blur(function(){
//1. 失去焦点获得数据框的内容
var usernameInput = $("#username").val();
//2. 去服务器端校验用户名是否存在----Ajax
$.post(
"${pageContext.request.contextPath}/checkUsername",
{"username":usernameInput},
function(data){
var isExist = data.isExist;
//3. 根据返回的isExist动态的显示数据
var usernameInfo = "";
if(isExist){
//该用户存在
usernameInfo = "该用户名已经存在";
$("#usernameInfo").css("color","red");
}else{
usernameInfo = "该用户名可以使用";
$("#usernameInfo").css("color","green");
}
$("#usernameInfo").html(usernameInfo);
},
"json"
);
});
});
</script>
</head>
<body>
<h3>用户名校验</h3>
<div>
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名" >
<span id="usernameInfo"></span>
</div>
</body>
</html>
- web层
package com.itzhouq.web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.itzhouq.service.UserService;
/**
* 异步校验用户名是否存在demo
* @author itzhouq
*
*/
public class CheckUsernameServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得要校验的用户名
String username = request.getParameter("username");
//将username传递给service层
UserService service = new UserService();
boolean isExist = service.checkUsername(username);
//返回给前台
response.getWriter().write("{\"isExist\":"+isExist+"}");
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
- service层
package com.itzhouq.service;
import java.sql.SQLException;
import com.itzhouq.dao.UserDao;
public class UserService {
//校验用户名是否存在
public boolean checkUsername(String username) {
UserDao dao = new UserDao();
Long isExist = 0L;
try {
isExist = dao.checkUsername(username);
} catch (SQLException e) {
e.printStackTrace();
}
return isExist > 0 ? true : false;
}
}
- dao层
package com.itzhouq.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import com.itzhouq.utils.DataSourceUtils;
public class UserDao {
//校验用户名是否存在
public Long checkUsername(String username) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select count(*) from user where username = ?";
Long query = (Long) runner.query(sql, new ScalarHandler(), username);
return query;
}
}
4. 测试
数据库中有两个测试的用户名，分别为lucy和jack。当用户输入这两个用户名时，提示不能使用该用户名，否则能使用。
测试1
测试2
当然这一个小demo是有BUG的，比如用户可以不输入任何内容也可以通过，这样程序很容易崩溃的。
