在服务器端使用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. mysql数据库中,通过mysqldump工具仅将某个库的所有表的定义进行转储

    需求描述: 在研究mysqldump工具的使用,想的是如何将某个库下的,或者某个表的表的定义(表结构创建语句)进行转储 操作过程: 1.通过--no-data参数,就可以将某个库的表定义进行转储 [m ...

  2. Cocos2d-x3.0触摸

    cocos2d-x 3.0開始採用C++11,并開始脱离OC风格,在触摸处理上也作出了改变 C++11带来了Lambda表达式(匿名函数),它将简化程序编写,可使代码更清晰易懂 在旧2.x版本号的触摸 ...

  3. 如何根据select选择的值反查option的属性

    有时候select已经被选中了,想知道这个选中option的属性又该如何处理呢? 我这里提供一种粗暴的方式 <!DOCTYPE HTML> <html lang="en-U ...

  4. Android NDK开发-1-环境搭建

    1.NDK介绍 Android NDK 是在SDK前面又加上了“原生”二字,即Native Development Kit,因此又被Google称为“NDK”.众所周知,Android程序运行在Dal ...

  5. SVN-001

    1.cd到指定目录: 2.执行:svn cleanup:

  6. 查看磁盘读写：iostat

    iostat命令用来查看磁盘IO的读写情况,用法如下: [root@localhost ~]$ yum install -y sysstat # 安装iostat命令 [root@localhost ...

  7. Swift 高级运算符

    本文转载至 http://my.oschina.net/sunqichao/blog?disp=2&catalog=0&sort=time&p=2 除了基本操作符中所讲的运算符 ...

  8. TP框架控制器的空操作

    在浏览器中输入tp框架入口文件的地址,如图 要注意,localhost/后面跟的是www的下一级,tp文件的上一级,因为我直接把tp文件做成了www目录的下一级,所以我写的地址localhost后面跟 ...

  9. android基础---->发送和接收短信

    收发短信应该是每个手机最基本的功能之一了,即使是许多年前的老手机也都会具备这项功能,而Android 作为出色的智能手机操作系统,自然也少不了在这方面的支持.今天我们开始自己创建一个简单的发送和接收短 ...

  10. 详解Javascript中prototype属性

    转自:https://www.jb51.net/article/91826.htm 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Jav ...