使用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,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);
	}

}

原文链接：https://www.f2er.com/ajax/163854.html

使用Ajax验证用户是否已存在

猜你在找的Ajax相关文章