Ajax异步验证登陆或者注册
首先介绍一个不错的学习Ajax的中文网站：http://www.w3school.com.cn/ajax/index.asp
AJAX = 异步 JavaScript 和 XML。详细介绍见上面的网址即可；
1：首先介绍一下使用Javascript写的异步验证，然而在实际开发过程中很少用这种的，太过繁琐，但是依旧写一个吧！至少懂其原理哦！
1.1：第一种方式：先说使用get方法向服务器发送请求的方法吧；
首先创建一个页面，如register.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>注册的页面</title>
<script type="text/javascript">
//onblur失去焦点的值 //定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
function checkIt(){
//获取文本框的值
var account=document.getElementById("account").value;
//alert("测试获取文本框的值："+account);
//先创建XMLHttpRequest对象
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//服务器地址和数据
var url="system/usercheck?account="+account;
//规定请求的类型、URL 以及是否异步处理请求。
xmlHttp.open("GET",url,true);
//将请求发送到服务器
xmlHttp.send();
//回调函数
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200){
//给div设置内容
document.getElementById("errorAccount").innerHTML = xmlHttp.responseText;
}
}
//给div设置内容
//document.getElementById("errorAccount").innerHTML=account;
}
</script>
</head>
<body bgcolor="#CCFF00"> <center>
<form action="" method="post">
<table>
<caption>注册的页面</caption>
<tr>
<td>账号：</td>
<td>
<input type="text" name="account" id="account" onblur="checkIt()"/>
<div id="errorAccount" style="color:red;display:inline;"></div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="text" name="sex"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
1.2：实现后台模拟数据库登陆的Servlet页面，源码如下，类名是UserCheckServlet.java
package com.bie; import java.io.IOException;
import java.io.PrintWriter; 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 BieHongLi
* @version 创建时间：2017年3月2日 下午9:06:46
*
*/
@WebServlet("/system/usercheck")
public class UserCheckServlet extends HttpServlet{ private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置字符编码集
request.setCharacterEncoding("utf-8");
//模拟存在数据库里面的账号
String[] arr={"张三","李四","王五","admin","小别"};
//获取前台传来的数据
String account=request.getParameter("account"); //模拟和数据库里面的信息匹配
boolean mark=false;
for(String user:arr){
if(user.equals(account)){
mark=true;
break;
}
} //响应前台
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out=response.getWriter();
if(mark){
out.println("<font color='red'>该帐号已经存在，请重新输入!</font>");
}else{
out.println("<font color='green'>恭喜您，该帐号可以使用!</font>");
}
out.flush();//刷新流
out.close();//关闭流 } }
效果如下所示：
1.3：第二种方式，使用post方式发送服务器请求；还如上所示，先写一个jsp页面，如register2.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>注册的页面</title>
<script type="text/javascript">
//onblur失去焦点的值 //定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
function checkIt(){
//获取文本框的值
var account=document.getElementById("account").value;
//alert("测试获取文本框的值："+account);
//先创建XMLHttpRequest对象
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//服务器地址和数据
var url = "system/usercheck";
//规定请求的类型、URL 以及是否异步处理请求。
xmlHttp.open("POST",url,true);
//向请求添加 HTTP 头。这个必加，是提交到后台的方式
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//将请求发送到服务器
xmlHttp.send("account="+account);
//回调函数
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200){
//给div设置内容
document.getElementById("errorAccount").innerHTML = xmlHttp.responseText;
}
}
//给div设置内容
//document.getElementById("errorAccount").innerHTML=account;
}
</script>
</head>
<body bgcolor="#CCFF00"> <center>
<form action="" method="post">
<table>
<caption>注册的页面</caption>
<tr>
<td>账号：</td>
<td>
<input type="text" name="account" id="account" onblur="checkIt()"/>
<div id="errorAccount" style="color:red;display:inline;"></div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="text" name="sex"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
1.4:然后写后台，依旧如上所示；如UserCheckServlet.java
package com.bie; import java.io.IOException;
import java.io.PrintWriter; 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 BieHongLi
* @version 创建时间：2017年3月2日 下午9:06:46
*
*/
@WebServlet("/system/usercheck")
public class UserCheckServlet extends HttpServlet{ private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置字符编码集
request.setCharacterEncoding("utf-8");
//模拟存在数据库里面的账号
String[] arr={"张三","李四","王五","admin","小别"};
//获取前台传来的数据
String account=request.getParameter("account"); //模拟和数据库里面的信息匹配
boolean mark=false;
for(String user:arr){
if(user.equals(account)){
mark=true;
break;
}
} //响应前台
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out=response.getWriter();
if(mark){
out.println("<font color='red'>该帐号已经存在，请重新输入!</font>");
}else{
out.println("<font color='green'>恭喜您，该帐号可以使用!</font>");
}
out.flush();//刷新流
out.close();//关闭流 } }
演示效果如下所示：
2：使用jQuery进行异步请求验证，在开发中最常使用，实际开发过程中必须会使用的技术；
推荐一个jQuery在线api的网站(挺不错的在线查看api，也可以下载，我用着挺方便的)：http://jquery.cuishifeng.cn/
2.1：下面介绍如何使jQuery进行开发，需要注意的是要引入一个jQuery的js，如下：
<script type="text/javascript" src="js/jquery.min.js"></script>
2.2：如上，依旧先创建一个register3.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>注册的页面</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//给账号文本框绑定失去焦点的事件
$("#account").blur(function(){
//alert("测试"+$(this).val());
$.ajax({
url:"system/usercheck",//设置服务器地址，即为servlet配置的url-pattern
type:"post",//提交的方式
data:{account:$(this).val()},//提交到服务器的数据，多个值以逗号分割开{account:$(this).val(),...}
success:function(data){//回调函数，data是返回的数据
$("#errorAccount").html(data);
}
});
});
}); </script>
</head>
<body bgcolor="#CCFF00"> <center>
<form action="" method="post">
<table>
<caption>注册的页面</caption>
<tr>
<td>账号：</td>
<td>
<input type="text" name="account" id="account" onblur="checkIt()"/>
<div id="errorAccount" style="color:red;display:inline;"></div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="text" name="sex"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
2.3：后台servlet代码依旧如上面的模拟数据库，代码如下所示：
package com.bie; import java.io.IOException;
import java.io.PrintWriter; 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 BieHongLi
* @version 创建时间：2017年3月2日 下午9:06:46
*
*/
@WebServlet("/system/usercheck")
public class UserCheckServlet extends HttpServlet{ private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置字符编码集
request.setCharacterEncoding("utf-8");
//模拟存在数据库里面的账号
String[] arr={"张三","李四","王五","admin","小别"};
//获取前台传来的数据
String account=request.getParameter("account"); //模拟和数据库里面的信息匹配
boolean mark=false;
for(String user:arr){
if(user.equals(account)){
mark=true;
break;
}
} //响应前台
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out=response.getWriter();
if(mark){
out.println("<font color='red'>该帐号已经存在，请重新输入!</font>");
}else{
out.println("<font color='green'>恭喜您，该帐号可以使用!</font>");
}
out.flush();//刷新流
out.close();//关闭流 } }
演示效果如下所示：
3:如果说还有更加适合进行异步验证的方法，那么就是下面这种，直接使用post进行异步验证，理解其原理，异步验证so easy!!!
3.1:首先创建一个页面register4.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>注册的页面</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//异步验证
$("#account").blur(function(){
$.post("system/usercheck2",{account:$(this).val()},
function(data){
if(data=="true"){
//如果已经存在，提示账号已经被注册
$("#errorAccount").html("账号已被注册，请重新输入!");
}else{
//这里可以注册的可以不进行提示,清空即可
$("#errorAccount").html("<font color='green'>账号可以注册哟!</font>");
}
},"text");
});
}); </script>
</head>
<body bgcolor="#CCFF00"> <center>
<form action="" method="post">
<table>
<caption>注册的页面</caption>
<tr>
<td>账号：</td>
<td>
<input type="text" name="account" id="account" onblur="checkIt()"/>
<div id="errorAccount" style="color:red;display:inline;"></div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="text" name="sex"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
3.2：这次的servlet后台处理虽然依旧是模拟数据库，但是操作却不一样了。需要注意一下；
package com.bie.servlet; import java.io.IOException;
import java.io.PrintWriter; 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 BieHongLi
* @version 创建时间：2017年3月2日 下午9:06:46
*
*/
@WebServlet("/system/usercheck2")
public class UserCheckServlet2 extends HttpServlet{ private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置字符编码集
request.setCharacterEncoding("utf-8");
//模拟存在数据库里面的账号
String[] arr={"张三","李四","王五","admin","小别"};
//获取前台传来的数据
String account=request.getParameter("account"); //模拟和数据库里面的信息匹配
boolean mark=false;
for(String user:arr){
if(user.equals(account)){
mark=true;
break;
}
} //响应前台
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out=response.getWriter();
if(mark){
out.print("true");
}else{
out.print("false");
}
out.flush();//刷新流
out.close();//关闭流 } }
演示效果如下所示：
革命尚未成功，别同志尚需努力啊！
Ajax异步验证登陆或者注册的更多相关文章
- 用AJAX实现页面登陆以及注册用户名验证
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX 是一种用于创建快 ...
- ajax异步验证用户名密码，提示路径错误
使用thinkphp框架异步验证用户名和密码的时候,ajax路径错误可能有多重情况.我遇到的是,我自感路径没问题,且先前使用无错.由于多人合作使用svn,所以在更新代码后,使用firebug显示一直是 ...
- ssm框架整合+Ajax异步验证
SSM框架是目前企业比较常用的框架之一,它的灵活性.安全性相对于SSH有一定的优势.说到这,谈谈SSM和SSH的不同点,这也是企业常考初级程序员的面试题之一.说到这两套框架的不同,主要是持久层框架Hi ...
- 利用js制作异步验证ajax方法（）
如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...
- Java--- Ajax异步验证用户名是否存在
今天复习了一下 Ajax异步验证用户名是否存在,在下面我写三种,一般开发时候都用第三种 jQuery和Ajax结合的形式,下面就介绍三种,具体说明代码里就有啦,废话不多说,直接上代码: 第一种方式: ...
- struts2中的Ajax异步校验
登录时验证码的异步校验: 1.验证码生成的是图片因此在struts.xml文件里面配置action 时,result标签中type 属性是stream 2.验证码图片的src的值为配置action名字 ...
- yii中异步验证和自定义方法验证
一.异步验证,一般使用ajax验证唯一性较多 1.model开启验证[['mobile_id','ip'], 'unique','message'=>Yii::t('app','E10010') ...
- PHP+Ajax 异步通讯注册验证
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 本博文将一步步带领你实现抽屉官网的各种功能：包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...
随机推荐
- 神级程序员通过两句话带你完全掌握Python最难知识点——元类！
千万不要被所谓"元类是99%的python程序员不会用到的特性"这类的说辞吓住.因为 每个中国人,都是天生的元类使用者 学懂元类,你只需要知道两句话: 道生一,一生二,二生三,三生 ...
- 10-SQL Server 2008 R2安装步骤
一. 软件和环境 1. 软件 : SQL Server 2008 R2 企业版 软件下载地址:XXXX 2. 环境要求: .Net FrameWork 3.5 以上 (windows 7 ...
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
- GBK-----UTF-8编码格式问题浅析
首先,想必大家在不同环境下切换写代码的时候,都会遇见乱码的时候(读取二进制的时候采用的编码和最初将字符转换成二进制时的编码不一致.),大多数人都知道,只需要把项目工程的编码格式调整一下为最初的编码就可 ...
- Hadoop mapreduce执行过程涉及api
资源的申请,分配过程略过,从开始执行开始. mapper阶段: 首先调用默认的PathFilter进行文件过滤,确定哪些输入文件是需要的哪些是不需要的,然后调用inputFormat的getSplit ...
- centOS6.4 extundelete工具恢复rm -rf 删除的目录[转]
原文:http://www.cnblogs.com/patf/p/3368765.html PS:补充下,我在fedora 19上运行的时候遇到的一个问题: 1 [root@localhost ext ...
- ubuntu下安装intel realsense驱动
在安装之前一定要确保系统是ubuntu 14.04.3 64位! 由于一开始安装的是32位系统,导致在升级内核版本到4.4时各种问题,最终靠重装系统解决. 因为intel给出的测试代码均是在64位14 ...
- 【windows核心编程】注入DLL时BUG排除与调试
DLL注入排除bug的思路步骤. 1.在VS中监视输入err,hr检查DLL是否注入成功 2.OD断点loadlibraryW,loadlibraryA是否已经注入成功,eax是否有值. 3.检查路径 ...
- STM32F103X datasheet学习笔记---RCC（reset and clock control）
1.前言 本文主要记录stm32 关于reset 和 clock部分 datasheet的内容. 2.reset 有三种类型的reset:system reset, power reset, back ...
- openstack swift节点安装手册3-最后的安装配置及验证
以下步骤都在controller节点上执行 1.远程获取/etc/swift/swift.conf文件: curl -o /etc/swift/swift.conf https://git.opens ...