在服务器端使用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. Unity中Oculus分屏相机和普通相机一键切换

    Unity中Oculus分屏相机和普通相机一键切换 一.OCulus 分屏相机介绍 在VR开发工程中,总会觉得OC分屏的处理太慢,严重浪费时间啊! 但是不使用有不好调试,来回切换相机就成为了一个必须. ...

  2. php截取中文字符串时乱码问题

    <?php function chinesesubstr($str,$start,$len) { //$str指字符串,$start指字符串的起始位置,$len指字符串长度 $strlen=$s ...

  3. linux的setup命令设置网卡和防火墙等

    以前在centos上配置网卡都是纯命令行,今天发现linux原来还有一个setup那么好用的命令,真是相见恨晚,以后防火墙.网卡.其他网络配置.系统配置(开机启动项)都可用他来完成了

  4. type 、instanceof、in 和 hasOwnproperty

    typeof可以检测的类型有:string.number.boolean.undefined.不可以用typeof检测null typeof也可以用来检测function,但是在IE8及跟早的浏览器中 ...

  5. Intel产品AMT本地及远程提权漏洞（CVE-2017-5689）复现 【转载自freebuf.com】

    零.绪论: 1.鸣谢freebuf的文章,主要是学习这个漏洞,文章地址: Intel产品AMT本地及远程提权漏洞(CVE-2017-5689)复现 2.在shadon上找了多个该漏洞尝试复现失败(评论 ...

  6. koan重装system

    author:headsen chen date: 2018-08-02   16:29:51 koan是kickstart-over-a-network的缩写,它是cobbler的客户端帮助程序,k ...

  7. ansible的入门级使用

      author: headsen  chen   date: 2018-08-02   11:46:35 1,ansible的安装 yum install epel-release yum -y i ...

  8. angular -- ng-ui-route路由及其传递参数？page页面版

    前面有说过 ng-ui-route 使用 script 标签来做,但是很多时候,会通过引入模板页面的方式来实现: 具体代码: <!DOCTYPE html> <html lang=& ...

  9. PHP新版本变化

    世界变化真快,突然听闻 PHP 都到 7.3 版本了,7.2 还没仔细了解过呢.看到我司面试时会问到php新版本有什么特性,美名其曰考察其学习新技术的能力,我有点汗颜,自己都没有主动去了解过,实在不应 ...

  10. Yii 各种url地址写法

    echo Url::home(); 生成入口地址/yii2test/frontend/web/index.php: echo  Url::base();生成入口文件夹地址:/yii2test/fron ...