一、案例分析
1.<input name="username">失去焦点时，使用$.post()将用户名以ajax的方式发送给服务器
2.服务器获取用户名后，并通过用户名查询用户，如果用户存在，返回不可用提示；如果用户名可用，返回可用提示
3.根据服务器响应的json数据，控制提示信息的显示和提交的按钮是否可用
二、搭建环境
步骤1：创建项目，导入页面
步骤2：导入jar包
步骤3：复制工具类
步骤4:数据库及表
步骤5：编写javabean
三、服务器端程序
步骤1：编写servlet，获得用户名查询是否存在，并返回json数据
步骤2：编写service
步骤3：编写dao，提供findByName()方法
四、浏览器JS
步骤1：修改提示信息显示区域
步骤2：给按钮添加id属性，并设置禁用，使用bootstrap的样式显示禁用效果
步骤3：编写js，当input失去焦点，发生Ajax，并控制提示信息显示和按钮是否可用
1.页面代码：
<script type="text/javascript">
$(function(){
//为输入框绑定事件
$("#username").blur(function(){
//1.失去焦点获得输入框的内容
var usernameInput = $(this).val();
//2.去服务器校验该用户名是否存在--ajax
$.post(
"${pageContext.request.contextPath}/CheckUsernameServlet",
{"username":usernameInput},
function(data){
//接收到CheckUsernameServlet返回的值
var isExist = data.isExist;
//3.根据返回的isExist动态显示
var uesrnameInfo = "";
if(isExist){//对返回的值进行判断
usernameInfo = "该用户名已经存在";
$("#usernameInfo").css("color","red");//设置提示文本的显示颜色
}else{
usernameInfo = "该用户名可以使用";
$("#usernameInfo").css("color","green");
}
//将提示信息写到用户名框后面
$("#usernameInfo").html(usernameInfo);
},
"json"
);
});
});
</script>
2.web层：
public class CheckUsernameServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取要校验的用户名
String username = request.getParameter("username");
//传递数据到service层
UserService service = new UserService();
boolean isExist = false;
try {
isExist = service.checkUsername(username);
} catch (SQLException e) {
e.printStackTrace();
}
response.getWriter().write("{\"isExist\":"+isExist+"}");
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
3.service层：
public class UserService {
public boolean checkUsername(String username) throws SQLException {
UserDao dao = new UserDao();
Long isExist = dao.checkUsername(username);
return isExist>0?true:false;
}
}
4.dao层
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;
}
}