使用Ajax验证用户是否已存在
在服务器端使用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验证用户是否已存在的更多相关文章
- 用ajax判断用户是否已存在?----2017-05-12
首先在用ajax之前,先说一下JSON: JSON:javascript object notation js对象标记 对于json,我们只需要知道如何定义json?如何输出?怎么遍历? 1.定义 ...
- AJAX验证用户是否存在
<html> <head> <title> ajax验证 </title> </head> <body> <input t ...
- EasyUI validatebox 自定义ajax验证用户名是否已存在
<td><input type="text" id="userName" name="userName" class=&q ...
- 03-22 Ajax验证用户登录
在网页中一般是通过表单提交数据,而表单获取信息,抛弃当前页面重新加载一个新页面. 现在,在webform网页中可以通过JueryAjax提交.处理数据的方式,达到异步刷新页面. 表单提交数据和Juer ...
- 提交ajax验证用户名是否已存在
前端页面 <tr> <td class="p_label"><span class="notnull"></span& ...
- 通过简单的ajax验证是否存在已有的用户名
首先来说说我对ajax的理解:简单地来说就是在不重新刷新页面的情况下,实现数据的调用获得更新. 我在这里介绍的是要过jquery封装好的ajax,大家可以去了解一下使用原生的XMLHttpReques ...
- 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转
在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...
- 基于Ajax与用户认证系统的登录验证
一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...
- 使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...
随机推荐
- 通过phoenix创建hbase表失败,创建语句卡住,hbase-hmaster报错:exception=org.apache.hadoop.hbase.TableExistsException: SYNC_BUSINESS_INFO_BYDAY_EFFECT
问题描述: 前几天一个同事来说,通过phoenix创建表失败了,一直报表存在的错误,删除也报错,然后就针对这个问题找下解决方案. 问题分析: 1.通过phoenix创建表,一直卡住不动了.创建语句如下 ...
- 使用scrapy_redis,实时增量更新东方头条网全站新闻
存储使用mysql,增量更新东方头条全站新闻的标题 新闻简介 发布时间 新闻的每一页的内容 以及新闻内的所有图片.东方头条网没有反爬虫,新闻除了首页,其余板块的都是请求一个js.抓包就可以看到. 项目 ...
- Android程序增加代码混淆器
增加代码混淆器.主要是增加proguard-project.txt文件的规则进行混淆,之前新建Android程序是proguard.cfg文件 能够看一下我採用的通用规则(proguard-proje ...
- ios开发 int,NSInteger,NSUInteger,NSNumber
分享一下,在工作工程中遇到的一些不留心的地方: 1.当需要使用int类型的变量的时候,可以像写C的程序一样,用int,也可以用NSInteger,但更推荐使用NSInteger,因为这样就不用考虑设备 ...
- Apache Prefork、Worker和Event三種MPM分析
三種MPM介紹 Apache 2.X 支持插入式並行處理模塊,稱爲多路處理模塊(MPM).在編譯apache時必須選擇也只能選擇一個MPM,對類UNIX系統,有幾個不同的MPM可供選擇,它們會影響到 ...
- Zookeeper(二)-- 客户端操作命令
一.前提 开启zookeeper服务端,用客户端连接.输入help,查看可使用命令,如下图所示: 操作无非就是增删改查等. 二.增加 格式:create [-s] [-e] path data acl ...
- Android 权限信息
访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permiss ...
- GROW
经理今天介绍了一下,GROW,就给他放上来了: 有一个辅导的方法 叫做 GROW (G:goal:R:reality:O:option:W:will)这个辅导方法是这样的,客观地给自己或者别人提问 ...
- <转>主成分分析(Principal components analysis)-最大方差解释,最小平方差解释
转自http://www.cnblogs.com/jerrylead/archive/2011/04/18/2020209.html http://www.cnblogs.com/jerrylead/ ...
- ubuntu 14 root 账户 启用与ssh登录
ubuntu 14.04 root用户登录 开启root帐号的方法: 为了启用root 帐号(也就是设置一个口令)使用: sudo passwd root 当你使用完毕后屏蔽root帐号使用: sud ...