在服务器端使用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. linux中,查看某个进程打开的文件数?

    需求描述: 今天在处理一个问题的时候,涉及到查看某个进程打开的文件数,在此记录下. 操作过程: 1.通过lsof命令查看某个特定的进程打开的文件数 [root@hadoop3 ~]# lsof -p ...

  2. Makefile--隐含规则自动推dao(一)

    [版权声明:转载请保留出处:周学伟:http://www.cnblogs.com/zxouxuewei/] 上一节的Makefile勉强可用,但还写的比较繁琐,不够简洁.对每一个.c源文件,都需要写一 ...

  3. 【RF库Collections测试】Dictionary Should Contain Value

    Name:Dictionary Should Contain ValueSource:Collections <test library>Arguments:[ dictionary | ...

  4. leetcode -- permutation 总结

    leetcode上关于permutation有如下几题 Permutation Sequence Next Permutation Permutations Permutations II

  5. lower()

    lower() 用于把字符串中的大写字母转换成小写字母 In [1]: str = "Hello World" In [2]: str.lower() Out[2]: 'hello ...

  6. 开源项目源码解析-PhotoView 源码解析

    1. 功能介绍 特性(Features): 支持 Pinch 手势自由缩放. 支持双击放大/还原. 支持平滑滚动. 在滑动父控件下能够运行良好.(例如:ViewPager) 支持基于 Matrix 变 ...

  7. C文件流

    在Linux系统中,系统默认认为每个进程打开了3个文件,即每个进程默认可以操作3 个流,即标准输入了流(/dev/stdin),标准输出流(/dev/stdout),标准错误输出流(/dev/stde ...

  8. Android中的渐变

    LinearGradient的用法 LinearGradient linearGradient; linearGradient = new LinearGradient(0, 0, 0, getHei ...

  9. NUC970设备驱动

    安装完WinUSB4NuVCOM_NUC970.exe后      USB0要配置成DEVICE 才可以在设备管理器中显示.

  10. C++11新特性之四——nullptr

    1. 引入nullptr的原因 引入nullptr的原因,这个要从NULL说起.对于C和C++程序员来说,一定不会对NULL感到陌生.但是C和C++中的NULL却不等价.NULL表示指针不指向任何对象 ...