在服务器端使用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);

	}

}

使用Ajax验证用户是否已存在的更多相关文章

  1. 用ajax判断用户是否已存在？----2017-05-12

    首先在用ajax之前,先说一下JSON: JSON:javascript object notation   js对象标记 对于json,我们只需要知道如何定义json?如何输出?怎么遍历? 1.定义 ...

  2. AJAX验证用户是否存在

    <html> <head> <title> ajax验证 </title> </head> <body> <input t ...

  3. EasyUI validatebox 自定义ajax验证用户名是否已存在

    <td><input type="text" id="userName" name="userName" class=&q ...

  4. 03-22 Ajax验证用户登录

    在网页中一般是通过表单提交数据,而表单获取信息,抛弃当前页面重新加载一个新页面. 现在,在webform网页中可以通过JueryAjax提交.处理数据的方式,达到异步刷新页面. 表单提交数据和Juer ...

  5. 提交ajax验证用户名是否已存在

    前端页面 <tr> <td class="p_label"><span class="notnull"></span& ...

  6. 通过简单的ajax验证是否存在已有的用户名

    首先来说说我对ajax的理解:简单地来说就是在不重新刷新页面的情况下,实现数据的调用获得更新. 我在这里介绍的是要过jquery封装好的ajax,大家可以去了解一下使用原生的XMLHttpReques ...

  7. 通过配置http拦截器，来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  8. 基于Ajax与用户认证系统的登录验证

    一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...

  9. 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

随机推荐

  1. 关于 MVVMLight 设计模式系列

    MVVM设计模式你可以在WPF.Silverlight.Windows Phone开发中使用,我想至今已经有非常非常多的朋友正在使用MVVM设计模式,尤其是MVVMLight . 本系列文章以WPF举 ...

  2. HBase表的架构原理

    HBase总体架构图 Hbase Table的基本单位是Region,一个Table相应多个Region.Table层级关系例如以下: Table       (HBase table)     Re ...

  3. javascript--枚举算法实现

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Java精选笔记_EL表达式

    EL表达式 初始EL EL是一种可以简化JSP页面的表达式,EL表达式的语法非常简单都是以"${"符号开始,以"}"符号结束的 EL表达式是一种简单的数据&qu ...

  5. Android中Invalidate与postInvalidate的区别<转>

    http://www.cnblogs.com/it-tomorrow/archive/2012/11/08/2760146.html 示例:http://rayleung.iteye.com/blog ...

  6. 图像识别api

    https://console-cloud.megvii.com/

  7. web服务器http.server 【python】

    参考博客: http://lxneng.iteye.com/blog/492063 http://www.cnblogs.com/itech/archive/2011/12/31/2308697.ht ...

  8. 《C++ Primer Plus》第13章 类继承 笔记

    类继承通过使用已有的类(基类)定义新的来(派生类),使得能够根据需要修改编程代码.共有继承建立is-a关系,这意味着派生类对象也应该是某种基类对象.作为is-a模型的一部分,派生类继承基类的数据称源和 ...

  9. poj_3630 trie树

    题目大意 给定一系列电话号码,查看他们之间是否有i,j满足,号码i是号码j的前缀子串. 题目分析 典型的trie树结构.直接使用trie树即可.但是需要注意,若使用指针形式的trie树,则在大数据量下 ...

  10. 设计模式之模板方法模式(Java实现)

    "那个,上次由于我老婆要给我做饭,所以就没有说完就走掉了...这个那个".这次和以前一样,先来开场福利(工厂方法模式已被作者踹下场).由美女抽象工厂介绍一下适用场景~大家欢迎 抽象 ...