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" οnsubmit="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();
}
}