使用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 ...
随机推荐
- linux中,查看某个进程打开的文件数?
需求描述: 今天在处理一个问题的时候,涉及到查看某个进程打开的文件数,在此记录下. 操作过程: 1.通过lsof命令查看某个特定的进程打开的文件数 [root@hadoop3 ~]# lsof -p ...
- Makefile--隐含规则自动推dao(一)
[版权声明:转载请保留出处:周学伟:http://www.cnblogs.com/zxouxuewei/] 上一节的Makefile勉强可用,但还写的比较繁琐,不够简洁.对每一个.c源文件,都需要写一 ...
- 【RF库Collections测试】Dictionary Should Contain Value
Name:Dictionary Should Contain ValueSource:Collections <test library>Arguments:[ dictionary | ...
- leetcode -- permutation 总结
leetcode上关于permutation有如下几题 Permutation Sequence Next Permutation Permutations Permutations II
- lower()
lower() 用于把字符串中的大写字母转换成小写字母 In [1]: str = "Hello World" In [2]: str.lower() Out[2]: 'hello ...
- 开源项目源码解析-PhotoView 源码解析
1. 功能介绍 特性(Features): 支持 Pinch 手势自由缩放. 支持双击放大/还原. 支持平滑滚动. 在滑动父控件下能够运行良好.(例如:ViewPager) 支持基于 Matrix 变 ...
- C文件流
在Linux系统中,系统默认认为每个进程打开了3个文件,即每个进程默认可以操作3 个流,即标准输入了流(/dev/stdin),标准输出流(/dev/stdout),标准错误输出流(/dev/stde ...
- Android中的渐变
LinearGradient的用法 LinearGradient linearGradient; linearGradient = new LinearGradient(0, 0, 0, getHei ...
- NUC970设备驱动
安装完WinUSB4NuVCOM_NUC970.exe后 USB0要配置成DEVICE 才可以在设备管理器中显示.
- C++11新特性之四——nullptr
1. 引入nullptr的原因 引入nullptr的原因,这个要从NULL说起.对于C和C++程序员来说,一定不会对NULL感到陌生.但是C和C++中的NULL却不等价.NULL表示指针不指向任何对象 ...