使用Ajax验证用户是否已存在
在服务器端使用Servlet，里面在集合里存了几个字符串，没有对数据库操作。
前台input页面和Ajax验证：
<%@ 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 }/ajax/jquery-1.11.1.js"></script>
<script type="text/javascript">
<span style="white-space:pre"> </span>$(function (){
<span style="white-space:pre"> </span>$(":text[name='username']").change(function (){
<span style="white-space:pre"> </span>var val = $(this).val();
<span style="white-space:pre"> </span>val = $.trim(val);
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>if(val != ""){
<span style="white-space:pre"> </span>var url = "${pageContext.request.contextPath}/UserValidateServlet";
<span style="white-space:pre"> </span>var args = {"username":val,"time":new Date()};
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>$.post(url, args, function(data){
<span style="white-space:pre"> </span>$("#message").html(data);
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>});
</script>
<!--
1、导入jQuery库
2、获取name="username" 的节点：username
3、为username 添加change 响应函数
4、获取username 的value属性值，去除前后空格且不为空，准备发送Ajax请求
5、发送Ajax请求检验username 是否可用
6、在服务器端直接返回一个html片段
7、在客户端浏览器把其直接添加到#message 的html中
-->
</head>
<body>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><form action="" method="post">
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>Username:<input type="text" name="username" />
<span style="white-space:pre"> </span><div id="message"></div>
<span style="white-space:pre"> </span><input type="submit" value="Submit" />
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></form>
<span style="white-space:pre"> </span>
</body>
</html>
后台Servlet实现：
package com.lym.ajax.servlets;
import java.io.IOException;
import java.io.PrintWriter;
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;
/**
* 用户验证测试
*
* @author liuyanmin
* 2015-1-19 下午11:05:46
*/
@WebServlet("/UserValidateServlet")
public class UserValidateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public UserValidateServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
List<String> userNames = Arrays.asList("aaa","bbb","ccc");//已注册的用户名
String username = request.getParameter("username");
PrintWriter out = response.getWriter();
String result = null;
if(userNames.contains(username)){
result = "<font color='red'>该用户名已被注册</font>";
}else{
result = "<font color='blue'>该用户名可用</font>";
}
out.println(result);
}
}
