采用jQuery采用Ajax异步加载的方式检验用户名是否存在
1. jsp页面代码:
使用jQuery一定要记得导入jQuery资源。
<!-- 引用jQuery库文件 -->
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script>
//采用ajax异步加载验证用户名是否存在
$(function () {
$("input[name='loginname']").blur(
function () {
//获取用户名元素的值
var userName = $(this).val()
//发送异步请求,请求方式是POST
//参数1:请求的目的路径
//参数2:要发送给Servlet的请求参数
//参数3:服务器端处理成功后要立即调用的函数(回调函数),
//回调函数上的result参数就代表了服务器端响应回来的结果
$.post(
"${pageContext.request.contextPath}/teacher.do",
{"userName": userName}, //以json的格式传递数据
function (result) {
//如果result==1说明,数据库中存在该用户名,反之,不存在
if (result == 1)
$("#checkUserName").html("该用户名已经存在!").css("color", "red"); //css中多个属性用css({"key1":"value11", "key2";"value2"})
else
$("#checkUserName").html("√").css("color", "green");
}
);
}
)
})
</script>
2. servlet层的代码:
//检验用户名是否存在
protected void checkLoginName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取用户名
String loginname = req.getParameter("loginname");
TeacherService teacherService = new TeacherServiceImpl();
int i = teacherService.selectUserCount(loginname);
//设置相应格式
resp.setContentType("text/html;charset=UTF-8");
//将用户名对应的总记录数响应给浏览器
PrintWriter out = resp.getWriter();
out.write(i+""); //最好传字符串,不然浏览器可能识别不了,导致乱码
//关闭流
out.close();
}