2014年12月23日14:48:20 天气阴 心情极度低落
1 使用servelt实现
Jsp
validateUserName.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证用户名是否可用</title>
<!-- 1. 导入JQuery库 2. 获取name="username"的节点：username 3. 为username添加change响应事件 3.1 获取username的value属性值，去除前后空格且不为空，准备发送Ajax请求 3.2 发送Ajax 请求检验username是否可用 3.3 在服务端直接返回一个html的片段：<font color="red">该用户名已经被使用</font> 3.4 在客户端浏览器把其直接添加到#message 的html中. -->
<script type="text/javascript"> $(function() { $(":input[name='username']").change(function() { var val = $(this).val(); val = $.trim(val); if (val != "") { var url="${pageContext.request.contextPath}/validateUserName"; var args = {"username":val,"time":new Date()}; $.post(url,args,function(data) { $("#message").html(data); }); } }); }) </script>
</head>
<body>
<form method="post" action="">
<input type="text" name="username"/><br />
<div id="message"></div><br />
<input type="submit" value="submit"/>
</form>
</body>
</html>
<!-- 觉得有些地方需要注意一下的 ①、导入的juery库任何一个版本都可以的，我导入的jquery.min.js(系统环境window8.1、chrome 一定是可以) ②、获取name="username"的节点：username,通过id选择器来获取也是可以的 ③、添加change事件是$("").change(function() {} ); 这个与javascript有点不同 ④、var url="${pageContext.request.contextPath}/validateUserName";也可以是var url ="validateUserName"; ${ pageContext.request.contextPath}的值为JobProjectWeb及项目名，考虑到浏览器后退的动作，用第一种好点 ⑤、val = $.trim(val);$.post(url,function(){}) 虽然这些都不能自动提示，但是确实是存在的，这个跟java代码有点区别，js中就算有错，也是不会提示的，所以自己要多加小心 ⑥、var args = {"username":val,"time":new Date()}; 传参数的时候是要以键值对的形式来写，我写错的原因把new Date() 写成了new date(),坑嗲是没有报错，所以请求是提交不到后台的，我在上面浪费了很多的时间，希望这个错误能让我记一辈子 -->
Java
ValidateUserNameServlet.java
@WebServlet("/validateUserName")
public class ValidateUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
List<String> userNameList = Arrays.asList("AAA","BBB","CCC");
String username = request.getParameter("username");
String result = null;
if (userNameList.contains(username)) {
result = "<font color='red'>用户名已经存在</font>";
} else {
result = "<font color='green'>用户可以使用</font>";
}
response.setContentType("text/html; charset=utf-8");
response.getWriter().print(result);
}
}
觉得需要注意的地方是 ①、因为Tomcat中涵盖了HttpServlet这个类了，所以是不用再添加额外的jar的（Apache
Tomcatv7.0\servlet-api.jar\javax.servlet.http.HttpServlet.class）
②、新建ValidateUserNameServlet.java文件，可以选Servlet类型；还有直接new
一个servlet是不用在web.xml下去配置servlet，因为已经通过注解的方式来说明servlet了@WebServlet(“/validateUserName”)
validateUserName
com.gditc.servlet.ValidateUserNameServlet
validateUserName
/validateUserName
2 ssh实现（数据库MysqL）
jsp
employeeAdd.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增用户</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript"> $(function() { $("#empname").change(function() { var empname = $(this).val(); empname = $.trim(empname); if (empname != null) { var url = "${pageContext.request.contextPath}/employee!validateEmpname.action"; var agrs = {"empname":empname,"date":<strong>new Date()</strong>}; $.post(url,agrs,function(data){ $("#message").html(data); }); } }); }) </script>
</head>
<body>
<form method="post" action="employee!addEmps.action">
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>员工名:</td>
<td><input name="employee.empname" type="text" id="empname"/></td>
</tr>
<tr>
<td>雇佣日期:</td>
<td><input name="employee.hiredate" type="text" id="hiredate"/></td>
</tr>
<tr>
<td>薪水：</td>
<td><input name="employee.salary" type="text" id="salary"/></td>
</tr>
<tr align="center">
<td colspan="2"><button type="submit" value="提交">提交</button></td>
</tr>
<tr >
<td colspan="2"><div id="message"></div></td>
</tr>
</table>
</form>
</body>
</html>
Java
EmployeeAction.java(实现ServletRequestAware)
/** * 验证用户名是否可用 * @return * @throws IOException */
public String validateEmpname() throws IOException {
String empname = request.getParameter("empname");
Employee employee = employeeService.getEmpsByName(empname);
response.setCharacterEncoding("utf-8");
if (employee != null) {
response.getWriter().print("<font color='red'>该用户名已经存在</font>");
} else {
response.getWriter().print("<font color='green'>该用户名可用</font>");
}
return null;
}
EmployeeService.java
public List<Employee> getAllEmps() {
return employeeDao.getAllEmp();
}
EmployeeDao.java
public Employee getEmpByName(String empname) {
Session session = getSession();
//hql语句注意事项：=:(等号冒号)前后不能有空格，否则报错
Query query = session.createQuery("from Employee where empname=:name");
query.setParameter("name",empname);
Employee employee = (Employee) query.uniqueResult();
return employee;
} 原文链接：https://www.f2er.com/ajax/161515.html