在服务器端使用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. vertica时间计算SQL语句实例：统计一天内登录的用户

    SQL语句实例: select count(id) as num from public.user where cast((CURRENT_TIMESTAMP-login_timed) day as ...

  2. swift学习笔记之---数组、字典、枚举、结构体

    1.数组-Array let types = ["none","warning","error"] //省略类型的数组声明 let menb ...

  3. MySQL技术内幕：SQL编程 第2章 数据类型 读书笔记

    2.1 类型属性 2.1.1 UNSIGNED 数字无符号化, INT的值 -2147483648 ~ 2147483647  INT UNSIGNED的值 0 ~ 4294967295 int a ...

  4. 查看磁盘读写：iotop

    iotop命令用来动态地查看磁盘IO情况,用法如下: [root@localhost ~]$ yum install -y iotop # 安装iotop命令 [root@localhost ~]$ ...

  5. 批量执行命令：fabric

    Fabric 可以通过 SSH 在多台客户端主机上批量执行任务,是基于 paramiko 封装开发的,paramiko 更底层一些,安装方法如下: [root@localhost ~]$ yum in ...

  6. Android中Bitmap和Drawable详解

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  7. Nginx遇上Access Denied提示怎么解决

    这几天在摆弄linux下面的各种服务器,对nginx非常有兴趣. 于是把phpmyadmin传上去了,先是phpmyadmin配了半天,结果配好之后发现phpmyadmin一些logo.css.js文 ...

  8. 【MySQL】查询时强制区分大小写的方法

    MySQL默认的查询也不区分大小写.但作为用户信息,一旦用户名重复,又会浪费很多资源.再者,李逵.李鬼的多起来,侦辨起来很困难.要做到这一点,要么在建表时,明确大小写敏感(字段明确大小写敏感) sql ...

  9. Android技巧分享——Android开发超好用工具吐血推荐(转)

    内容中包含 base64string 图片造成字符过多,拒绝显示

  10. Struts2中的OGNL详解 《转》

    首先了解下OGNL的概念: OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表达式语言,它通过简单一致的语法,可以任意存取对象的 ...