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的 ...
随机推荐
- Spring RedisTemplate操作-注解缓存操作（11）
@Service @CacheConfig(cacheNames="user") public class RedisAn { public Map<String, User ...
- LL(1)文法分析表的构造和分析过程示例
在考完编译原理之后才弄懂,悲哀啊.不过懂了就好,知识吗,不能局限于考试. 文法: E→TE' E'→+TE'|ε T→FT ' T'→*FT'|ε F→id| (E) 一.首先判断是不是 LL(1)文 ...
- Storm Topology 提交 总结---Kettle On Storm 实现
一,目的 在学习的过程中,需要用到 PDI---一个开源的ETL软件.主要是用它来设计一些转换流程来处理数据.但是,在PDI中设计好的 transformation 是在本地的执行引擎中执行的,(参考 ...
- .NET面试题系列（十四）锁
锁 分布式锁 如何解决分布式锁超时问题 我们可以让获得锁的线程开启一个守护线程,用来给快要过期的锁“续航” 当过去了29秒,线程A还没执行完,这时候守护线程会执行expire指令,为这把锁“续命”20 ...
- 图片压缩之-JPEGCodec失效替换方案
今天遇到一个405错误,提示Method not allowed ,一直以为是控制器出问题了,后来发现实际上是Jpeg库有问题.刚开始用这个库,没想到已经不推荐使用了.下面是网上找的解决方案.http ...
- node.js 找不到 xxx 模块解决办法
node.js找不到xxx 这个模块的解决方法. 按顺序来. 1.检查一下是否拼写错误. 2.这个模块是自己写的,是的话.检查一下路径是否正确. 3.如果是导入的模块.用 npm list这个命令输出 ...
- day1 查看当前目录命令：pwd
用到查看当前目录的完整路径使用:pwd 物理路径和连接路径什么鬼?没明白暂时借鉴别人的记录下 显示当前目录的物理路径 pwd –P 1: [root@DB-Server init.d]# cd /et ...
- tr 设置margin、padding无效
tr.td设置margin 无效 tr 设置padding无效.td设置padding有效
- 交换机console口连接
http://www.webkaka.com/info/archives/knowledge/2010/08/30452/
- SVM较全面介绍，干货！（转载）
很不错的一篇介绍SVM的文章,证明通俗易懂! 转自:https://blog.csdn.net/v_july_v/article/details/7624837 前言 动笔写这个支持向量机(suppo ...