【jQuery实例】Ajax登录页面
先来看看预览效果
Ajax登录重点在Ajax,输入用户名和密码后,使用Ajax方式将信息提交到服务器端,服务器端判断时候存在该用户,存在则登录成功并转向管理界面(有时需要写cookie或是利用Session,此处不作讨论),不存在则提示登录失败。
基本流程图如下
上面是主要思路,为了打造安全的登录,在使用ajax将密码传到服务器端前,我们可以使用MD5对密码进行加密,当然数据库中存储的也是加密后的字符串。jQuery有一款这样的MD5加密插件,使用十分方便。
流程知道了,就可以方便实现了。以下是一些主要的代码
Default.aspx:主要是提供超链接,点击会调用thickbox,打开弹出页面。
<div style="margin-left:50px; margin-top:50px; ">
欢迎使用后台,
<a href="Login.htm?TB_iframe&height=180&width=350&modal=true" class="thickbox" id="myToolTip" title="点击登录,进入后台管理" >
点击登录!</a>
继续浏览前台,<a href="../Default.aspx">返回前台</a>
login.htm:真正的登录界面,负责登录逻辑
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$().ready(function () {
$('#Login').click(function () {
if ($('#username').val() == "" || $('#password').val() == "") {
alert("用户名或密码不能为空!");
}
else {
$.ajax({
type: "POST",
url: "Ajax/LoginHandler.ashx",
data: "username=" + escape($('#username').val()) + "&password=" + escape($('#password').val()),
beforeSend: function () {
$("#loading").css("display", "block"); //点击登录后显示loading,隐藏输入框
$("#login").css("display", "none");
},
success: function (msg) {
$("#loading").hide(); //隐藏loading
if (msg == "success") {
//parent.tb_remove();
parent.document.location.href = "admin.htm"; //如果登录成功则跳到管理界面
parent.tb_remove();
}
if (msg == "fail") {
alert("登录失败!");
}
},
complete: function (data) {
$("#loading").css("display", "none"); //点击登录后显示loading,隐藏输入框
$("#login").css("display", "block");
},
error: function (XMLHttpRequest, textStatus, thrownError) {
}
});
}
});
});
</script>
<div id="loading" style="text-align: center; display: none; padding-top: 10%">
<img src="images/loadingajax.gif" alt="loading" />
</div>
<div id="login" style="text-align: center">
<div style="position:absolute; right:0; top:0"><img src="images/closebox.png" onclick="parent.tb_remove()" alt="点击关闭" style="cursor:pointer" /></div>
<table border="0" cellpadding="3" cellspacing="3" style="margin: 0 auto;">
<tr>
<td style="text-align: right; padding: 10px">
<label>
用户名:</label>
</td>
<td>
<input id="username" type="text" size="20" />
</td>
</tr>
<tr>
<td style="text-align: right; padding: 10px">
<label>
密码:</label>
</td>
<td>
<input id="password" type="password" size="20" />
</td>
</tr>
<tr align="right">
<td colspan="2">
<input type="submit" id="Login" value=" 登 录 " style="margin-right: 50px">
<input type="submit" id="LoginCancel" value=" 取 消 " onclick="parent.tb_remove()">
</td>
</tr>
</table>
</div>
LoginHandler.ashx:ajax处理类,简单的逻辑
string username = context.Request["username"].ToString();
string password = context.Request["password"].ToString();
//context.Response.Write(password);如果使用加密,则写入数据库要加密后的字段,然后登陆的时候就用加密后的字符串匹配
//此处连接数据库查看是否有此用户,此处为了方便起见,直接判断
if (username == "admin" && password == "1")
{
context.Response.Write("success");
//存储session
}
else
{
context.Response.Write("fail");
}
ok,一个简单的登录功能就完成了,当然此处在登录的时候没有进行密码加密。
下面我们来看看jQuery的加密插件MD5插件, 使用十分方便,加入md5.js的引用就可以使用$.md5()函数对字符串进行加密,
如下对上述代码做稍微改变,即可看到加密后的字符串,
login.htm中:
data: "username=" + escape($('#username').val()) + "&password=" + $.md5(escape($('#password').val())),
success: function (msg) {
$("#loading").hide(); //隐藏loading
alert(msg);
if (msg == "success") {
//parent.tb_remove();
parent.document.location.href = "admin.htm"; //如果登录成功则跳到管理界面
parent.tb_remove();
}
if (msg == "fail") {
alert("登录失败!");
}
}
LoginHandler.ashx中加密码返回即可:
context.Response.Write(password);
ok,再次运行程序会弹出 输入密码的MD5加密之后的字符串。
实例代码下载
转自:http://www.cnblogs.com/alexis/archive/2010/09/04/1818144.html
转载于:https://www.cnblogs.com/iwsx/p/7117055.html
【jQuery实例】Ajax登录页面相关推荐
- django ajax页面加载,Python Django 之 基于JQUERY的AJAX 登录页面
解决Dropbox无法连接的问题 同步共享服务Dropbox从6月18日开始再次遭到封锁,原因是DNS污染.Dropbox上次在2010年5月曾遭到IP封锁和网址关键字过 滤,2012年5月除文件外链 ...
- jquery熊猫动画登录页面
下载地址 很有创意的login页面,基于jquery实现的熊猫动画登录页面. dd:
- Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
- html用表单做登录页面跳转页面,html表单实例:登录页面
1 2 3 4 5 登录页面 6 7 body{ 8 margin: 0px; 9 padding: 0px; 10} 11 #d ...
- PHP/AJAX——登录页面与登录信息提示(非安全版本)
基本概念 AJAX:AJAX引擎其实是一个JavaScript对象,全写是 window.XMLHttpRequest对象,由于浏览器的版本不同,特别是老版本的IE浏览器,虽然也支持AJAX引擎,但是 ...
- 如何用ajax做登录页面,ajax如何制作登录页面?登录页面ajax的请求详解(附完整实例)...
本篇文章主要的讲述了关于ajax登录页面时ajax请求的内容,现在我们一起来看看这篇文章吧 登录页面ajax请求 一.登录验证提示信息//提交登录信息sub.on('click',function(e ...
- 用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下 一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
- App简介及登录页面
一. APP目录 app目录:-migrations 数据操作记录,是自动创建的.数据修改表结构-__init__.py #在python3里面可有可无都行-__init__.py-admin.py ...
- idea html ajax,在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值
在 IntelliJ IDEA 8.1中编写一个ajax jquery实例,取不到页面上的值0 brnm12942014.08.17浏览115次分享举报 public class AjaxServle ...
最新文章
- 在思科模拟器下搭建WWW、DNS、FTP、Email服务
- Verilog中for语句的使用
- great sentences for university sentences
- python 判断点在随机多边形内_初中数学必须掌握的28个考点及60个易错点,收藏起来慢慢看!...
- 移动开发的分辨率问题
- boost::graph模块实现从连接的平面图开始并添加边以使图最大平面化
- 使用ABBYY FineReader进行自动图像预处理
- 堪称艺术品级的应用开发框架,Abp有望超越Spring?
- CSS3 3D位移和旋转
- Linux中vectormath无法通过pip安装的解决办法
- mysql 新增字段时判断字段是否存在
- protues7 使用笔记
- 5款免费的项目管理软件(推荐收藏)
- 为了寻找美,我决定对美女图片进行图像边缘化处理
- CNCF的中国云原生调查报告
- ubuntu16.04+gtx1050驱动安装记录
- 有道云笔记markdown上传本地图片的方法
- No property creategoryType found for type xxx! Did you mean ‘xxx‘?
- 期待已久的《刀剑神域》第三季终于来了
- 面试官:MySQL索引为什么要用B+树实现?
热门文章
- LeetCode刷题(6)
- docsys安装_DocSys文件系统部署
- 品质主管每日工作需要做哪些_游戏配音需要做哪些工作?
- .net前台ajax,asp.net利用Ajax和Jquery在前台向后台传参数并返回值
- Windows10安装Cmder(图文教程)
- Spring Boot+HATEOAS快速介绍与示例
- spring+hibernate+mysql mvc 配置
- c语言多线程怎么写,如何用C语言实现多线程
- Maven 仓库优先级
- Spring Data Jpa出现Not supported for DML operations