1、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>ajax jquery</title> <script type="text/javascript" src="resource/jquery1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ // userName 文本框的blur事件 $("#userName").blur(function(){ $.ajax({ url:"ajax", type:"GET", data: { userName:$("#userName").val() }, dateType:"json", async: true, // 回调函数 success: function(data){ $("#label").html(data); }, error:function(){ alert("ajax提交异常"); } }); }); }); 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获取信息 --> <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'>用户名已经存在</font>"); } else if (userName.length() == 0) { out.print("<font color='red'>用户不能为空</font>"); } else if (userName.indexOf(" ") > 0) { out.print("<font color='red'>用户不能含有空格</font>"); } else if (userName.length() > 10 || userName.length() < 4) { out.print("<font color='red'>用户长度在4-10之间</font>"); } else { out.print("<font color='green'>用户名可用</font>"); } out.flush(); out.close(); } }