文档章节

使用ajax实现用户登录验证(升级版)

尼阿卡
 尼阿卡
发布于 2016/04/24 12:55
字数 325
阅读 841
收藏 7

在上一篇博文http://my.oschina.net/lgr6/blog/664027中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现。

一.用jquery的ajax实现的关键代码如下

/*jquery实现
$(document).ready(function(){
	$("#account").blur(function(event) {
		$.ajax({
			type:"GET",
			url:"checkAccount.php?account="+$("#account").val(),
			dataTypes:"text",
			success:function(msg){
				$("#accountStatus").html(msg);
			},
			error:function(jqXHR) {
				alert("账号发生错误!")
			},
		});
	});

	$("#password").blur(function(event) {
		$.ajax({
			type:"GET",
			url:"checkPassword.php?",
			dataTypes:"text",
			data:"account="+$("#account").val()+"&password="+$("#password").val(),
			success:function(msg){
				$("#passwordStatus").html(msg);
			},
			error:function(jqXHR) {
				alert("密码查询发生错误!")
			},
		});
	});
}); */

一.用javascript实现的关键代码实现如下

//javascript实现
	function checkAccount(){
		var xmlhttp;
		var name = document.getElementById("account").value;
		if (window.XMLHttpRequest)
		  xmlhttp=new XMLHttpRequest();
		else
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

		xmlhttp.open("GET","checkAccount.php?account="+name,true);
		xmlhttp.send();

		xmlhttp.onreadystatechange=function(){
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
		}
	}

	function checkPassword(){
		var xmlhttp;
		var name = document.getElementById("account").value;
		var pw = document.getElementById("password").value;
		if (window.XMLHttpRequest)
		  xmlhttp=new XMLHttpRequest();
		else
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

		xmlhttp.open("GET","checkPassword.php?account="+name+"&password="+pw,true);
		xmlhttp.send();

		xmlhttp.onreadystatechange=function(){
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    document.getElementById("passwordStatus").innerHTML=xmlhttp.responseText;
		}
	}

mysql和数据库部分跟上篇博文的一样没有改变,运行结果如下图

© 著作权归作者所有

尼阿卡
粉丝 3
博文 24
码字总数 8902
作品 0
珠海
程序员
私信 提问
SpringBoot集成Spring Security(4)——自定义表单登录

通过前面三篇文章,应该大致了解了Spring Security的流程。你应该发现了,真正的登录请求是由Spring Security帮我们处理的,那么我们如何实现自定义表单登录呢,比如添加一个验证码… 源码地...

yuanlaijike
2018/05/09
0
0
使用 Perl、jQuery、Ajax、JSON 和 MySQL 实现简单的登录

自 WWW 创始之初,开发人员就尝试为他们的网站提供新的特性和部件来吸引用户,并通过应用最新的技术来简化操作。如今,一个普通的 web 用户的主要活动就是网上购物、搜索信息、注册论坛和社区...

IBMdW
2011/06/10
1K
3
java一体化构架--Jspx.net

一套开源的 Jspx.net Framework (简实构架)是一套开源的java一体化构架,丢掉了jsp编译的烦恼和使用tag的麻烦, 完整的架构体系,包括了ui、ioc、cache、连接池、验证、模板引擎、数据库中间件等...

jspxnet
2014/06/01
1K
0
C# websocket 实现扫码二维码登录----GoEasy

要实现扫码登陆我们需要解决两个问题: 在没有输入用户名及密码的情况下,如何解决权限安全问题?换句话讲,如何让服务器知道扫码二维码的客户端是一个合法的用户? 2. 服务器根据用户在客户端...

miaomiaogong1
2016/11/30
123
0
JAVA Websocket实现扫码二维码登录---GoEasy

最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式。当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些。 ...

miaomiaogong1
2016/12/05
107
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.2K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部