使用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 ...
随机推荐
- HTML 之前未接触过的标签
用于表单的HTML标签 HTML <fieldset> 标签 定义和用法 fieldset 元素可将表单内的相关元素分组. <fieldset> 标签将 ...
- 工具类之数据库工具类:DBUtil(採用反射机制)
常常操作数据库的码农们一定知道操作数据库是一项非常复杂的工作.它不仅要解决各种乱码的问题还要解决各种数据表的增删改查等的操作. 另外每次操作数据库都要用到数据库连接.运行SQL语句.关闭连接的操作.所 ...
- SQL Server--实体再复习
前些天小编所在的组织部重构.组长交给小编一项设计实体的活儿,它是我们软件灵魂(数据)的载体,实体的抽象影响到数据库设计,数据库设计的质量影响到整个程序的运营,以下是我设计的实体关系图: 系统核心业务逻 ...
- ScrollView:ScrollView can host only one direct child异常
java.lang.IllegalStateException: ScrollView can host only one direct child 原因是在外面有一个TextView控件,将其删除则 ...
- angularjs基础——变量绑定
1)弄一个ng-app(angularjs 应用) 2)在里面用ng-model(angularjs 模型)就可以定义一个模型变量 3)使用模版方法就可以输出变量了(例如:{{name}}) 示例: ...
- eclipse、tomca和jvm的相关内存配置
1, 设置Eclipse内存使用情况 修改eclipse根目录下的eclipse.ini文件 -vmargs //虚拟机设置 -Xms40m ...
- 关于Ethread的一些研究
环境 win764 以TP为例 ring3保护 它会在windbg断下 这个时候我们需要拿到当前线程对象 应该到 当前使用的CPU的地址 _KPRCB-> CurrentThread 就是当前线 ...
- Hibernate插入、查询、删除操作 HQL
Hibernate的所有的操作都是通过Session完成的. 基本步骤如下: 1:通过配置文件得到SessionFactory: SessionFactory sessionFactory=new C ...
- weblogic jprofile配置
前提: 1.安装好weblogic 2.安装好jprofile 非等待模式: export JAVA_OPTIONS="${JAVA_OPTIONS} -Dweblogic.threadpo ...
- linux如何设置用户权限
linux与用户权限设置: 1.添加用户 首先用adduser命令添加一个普通用户,命令如下: #adduser tommy //添加一个名为tommy的用户 #passwd tommy //修改密码 ...