ValiateUserNameServlet
package com.yucheng.ajax.servlets; import java.io.IOException; import java.lang.ProcessBuilder.Redirect; import java.util.Arrays; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/valiateUserName") public class ValiateUserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { List<String> userNames=Arrays.asList("AAA","BBB","CCC"); String userName=request.getParameter("userName"); String result=""; if(userNames.contains(userName)){ result="<font color='red'>该用户已经存在</font>"; }else{ result="<font color='green'>该用户可以使用</font>"; } response.setCharacterEncoding("UTF-8"); response.setContentType("text/html"); response.getWriter().print(result); } }
index.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>Insert title here</title> <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $(":input[name='userName']").change(function(){ var val=$(this).val(); val=$.trim(val); if(val !=""){ var url="${pageContext.request.contextPath}/valiateUserName"; var args={"userName":val,"time":new Date()}; $.post(url,args,function(data){ $("#message").html(data); }); } return false; }); }) </script> </head> <body> <form action="" method="post"> 用户名:<input type="text" name="userName"/> <br> <div id="message"></div> <br> <input type="submit" value="提交"/> </form> </body> </html>
图片: