1. jsp page
<%@ 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>ajax jquery</title> <script type="text/javascript" src="resource/jquery1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ // blur event of userName textbox $("#userName").blur(function(){ $.ajax({ url:"ajax", type:"GET", data: { userName:$("#userName").val() }, dateType:"json", async: true, // Callback success: function(data){ $("#label").html(data); }, error:function(){ alert("ajax submission exception"); } }); }); }); function checkForm(){ if(document.getElementById("label").innerHTML != "<font color=\"green\">用户名可用</font>"){ document.getElementById("userName").focus(); return false; } return true; } </script> </head> <body> <form action="login" method="post" onsubmit="return checkForm()"> 用户名:<input type="text" id="userName" name="userName"><label id="label"></label><br> 密码:<input type="password"><br> <input type="submit"/> </form> </body> </html>
2 、 web.xml
<!-- ajax get information--> <servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>com.servlet.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/ajax</url-pattern> </servlet-mapping>
3、servlet
package com.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String userName = request.getParameter("userName"); if(userName.equals("admin")){ out.print("<font color='red'>Username already exists</font>"); } else if (userName.length() == 0) { out.print("<font color='red'>User cannot be empty</font>"); } else if (userName.indexOf(" ") > 0) { out.print("<font color='red'>Users cannot contain spaces</font>"); } else if (userName.length() > 10 || userName.length() < 4) { out.print("<font color='red'>User length is between 4-10</font>"); } else { out.print("<font color='green'>Username available</font>"); } out.flush(); out.close(); } }