2.ajax+servlet实现注册时用户名验证
效果:
精灵图(来源:从百度注册中download下来的):
userVerify.jsp
<%@ 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>Insert title here</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
input{
height:24px;
}
span{
display:none;
float: right;
position: relative;
width: 250px;
top: 5px;
left: 5px;
height: 16px;
line-height: 14px;
padding-left: 20px;
background:url(img/reg_icons.png) -80px 0 no-repeat;
}
</style> </head>
<body>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="uname" id="uname" onblur="checkUserName()"><span id="tip"></span></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="注册"></td>
</tr>
</table>
<script type="text/javascript">
function checkUserName(){
var uname = document.getElementById("uname").value;
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function(){
//判断返回状态
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById("tip").style.display = "block";
var dataObj = eval("("+xmlHttp.responseText+")");
if(dataObj.exist == "success"){
document.getElementById("tip").innerText = "该用户可用!";
document.getElementById("tip").style.color = "#5BC92E";
document.getElementById("tip").style.backgroundPosition = "-80px 0";
}else if(dataObj.exist == "error"){
document.getElementById("tip").innerText = "请输入用户名!";
document.getElementById("tip").style.color = "#fc4343";
document.getElementById("tip").style.backgroundPosition = "-80px -24px";
}else{
document.getElementById("tip").innerText = "该用户已存在!";
document.getElementById("tip").style.color = "#fc4343";
document.getElementById("tip").style.backgroundPosition = "-80px -24px"; } } } xmlHttp.open("get","checkUserName?action=checkUserName&uname="+uname,true);
xmlHttp.send();
}
</script>
</body>
</html>
CheckUserNameAjaxServlet.java
package com.xxc.ajax; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; public class CheckUserNameAjaxServlet extends HttpServlet{ /**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
String action = req.getParameter("action");
if("checkUserName".equals(action)) {
this.checkUserName(req, resp);
}
} public void checkUserName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out = resp.getWriter();
String uname = req.getParameter("uname");
JSONObject resultJson = new JSONObject();//注意:使用此对象需要导入包,下面会介绍
if(uname.trim()==null || "".equals(uname.trim())){
resultJson.put("exist", "error");//用户名为空
}else if("xxc".equals(uname)) {
resultJson.put("exist", true);//用户名已存在
}else {
resultJson.put("exist", "success");//用户名不存在
}
out.println(resultJson);
out.flush();
out.close();
} }
web.xml
<servlet>
<servlet-name>CheckUserNameAjaxServlet</servlet-name>
<servlet-class>com.xxc.ajax.CheckUserNameAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUserNameAjaxServlet</servlet-name>
<url-pattern>/checkUserName</url-pattern>
</servlet-mapping>
实现ajax 的所需的json包(版本不一定是我所列的):
2.ajax+servlet实现注册时用户名验证的更多相关文章
- 用AJAX实现页面登陆以及注册用户名验证
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX 是一种用于创建快 ...
- PHP+Ajax 异步通讯注册验证
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
- 关于ajax用户名验证和jquery实现简单表单验证
首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...
- Myeclipse+AJAX+Servlet
最近刚开始学AJAX的知识,这里介绍一个简单的Myeclipse+AJAX+Servlet项目. 此项目包含3个文件:index.jsp.check.java.还有一个需要配置的文件是:web.xml ...
- Django项目:CRM(客户关系管理系统)--51--42PerfectCRM实现AJAX全局账号注册
#urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...
- 利用Form组件和ajax实现的注册
一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面建一个forms.py的文件来存放 2 ...
- apply-register-acl 参数允许FreeSWITCH分机注册/拨打不验证密码
今天调试 发现 注册的分机 的 `Auth-User` 居然是 `unknown` !!! 怎么回事? 仔细对比检查 发现, internal profile 指定了 `apply-register- ...
- 通过 jsp+ajax+servlet+webservice 远程访问天气预报服务
通过 jsp+ajax+servlet+webservice 远程访问天气预报服务 - webservice 客户端访问的方式 1. java代码来访问 2. ajax 方式异步加 ...
随机推荐
- 621. Task Scheduler CPU任务间隔分配器
[抄题]: Given a char array representing tasks CPU need to do. It contains capital letters A to Z where ...
- Windows ---- mysql 5.7 配置安装
去官网下载mysql 下载地址 https://dev.mysql.com/downloads/mysql/ 根据自己操作系统位数选择相对应的版本 点击Download下载 下载下来后是一 ...
- [SoapUI] Loop a test with different sets of data
- Python自然语言处理工具NLTK的安装FAQ
1 下载Python 首先去python的主页下载一个python版本http://www.python.org/,一路next下去,安装完毕即可 2 下载nltk包 下载地址:http://www. ...
- IBatis模糊查询
IBatis模糊查询 补充: mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * ...
- jcabanillas/yii2-inspinia-asset composert 安装失败
minimum-stability (root-only) 这定义了通过稳定性过滤包的默认行为.默认为 stable(稳定).因此如果你依赖于一个 dev(开发)包,你应该明确的进行定义. 对每个包的 ...
- 查看SSD寿命
查看SSD寿命 起初买mac book pro的时候挺担心SSD使用寿命的,过保了后,还搞了个移动硬盘,尽可能的把编译什么的都移动到移动硬盘上进行,实际上这样做都是没有必要的. 安装软件smartct ...
- CentOS关机命令
Linux centos关机与重启命令详解与实战 Linux centos重启命令: 1.reboot 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 1 ...
- AutoCompleteTextView 和 MultiAutoCompleteTextView 自动完成文本控件
概述 在html中有很多自动完成的应用,例如,百度的搜索,输入一些关键字,下面就会自动列出该关键字对应的一些消息 在Android中也有自动完成文本,这就是AutoCompleteTextVeiw和M ...
- 基于flask的轻量级webapi开发入门-从搭建到部署
基于flask的轻量级webapi开发入门-从搭建到部署 注:本文的代码开发工作均是在python3.7环境下完成的. 关键词:python flask tornado webapi 在python虚 ...