在服务器端使用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. go语言的time.Sleep

    首先:time.sleep单位为:1ns (纳秒) 转换单位: 1纳秒 =1000皮秒      1纳秒 =0.001 微秒      1纳秒 =0.000 001毫秒        1纳秒 =0.0 ...

  2. C#的字符串优化-String.Intern、IsInterned

    https://www.jianshu.com/p/af6eb8d3d4bf 首先看一段程序: using System; class Program { static void Main(strin ...

  3. float类型如何转换为string类型

    在一些很大的float类型的地方会用科学记数法表示,这个时候如果想完整记录下来,还是得转字符串,这里书写一个float类型转string类型的方法 <?php function float_to ...

  4. python2.0_s12_day15_django框架的基本使用

    day15本节内容介绍 上节作业讲解(让行进入编辑模式,批量编辑) CSS之特殊内容补充 CSS内容补充之伪类 伪类实例:返回顶部终极版 CSS内容补充之无法被覆盖 jQuery插件 jQuery插件 ...

  5. 【RF库测试】关键字get time

    *** Test Cases ***Timestamp ${time} GET TIME ${secs} GET TIME epoch ${year} GET TIME return year ${y ...

  6. JDBC连接oracle地址出错

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. PHP之语句

    前面的话 任何 PHP 脚本都是由一系列语句构成的.一条语句可以是一个赋值语句,一个函数调用,一个循环,一个条件语句或者甚至是一个什么也不做的语句(空语句).语句通常以分号结束.此外,还可以用花括号将 ...

  8. api静态化预案

    1.之前听到api静态化预案,一直以为是前端发送api请求,如果api请求失败,则再次发送一条请求,去请求备份的静态资源. 2.前两天了解到的api静态化预案是这样的:在请求api时,给api请求加上 ...

  9. 常用的vue辅助工具vue-devtools

    1,下载: https://github.com/datura-lj/vuedevtools 2,将下载好的文件拖到chrome拓展栏中(更多工具=>拓展程序): 3,修改计算机配置文件: wi ...

  10. Codeforces 603E Pastoral Oddities

    传送门:http://codeforces.com/problemset/problem/603/E [题目大意] 给出$n$个点,$m$个操作,每个操作加入一条$(u, v)$长度为$l$的边. 对 ...