php在登录页面使用ajax,使用Ajax安全的登录界面
这次给大家带来使用Ajax安全的登录界面,使用Ajax登录界面的注意事项有哪些,下面就是实战案例,一起来看一下。
登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口。接下来,我来带领大家打造一个漂亮、安全的登录界面,使用的技术是ASP.NET+jQuery
先来看看预览效果
Ajax登录重点在Ajax,输入用户名和密码后,使用Ajax方式将信息提交到服务器端,服务器端判断时候存在该用户,存在则登录成功并转向管理界面(有时需要写cookie或是利用Session,此处不作讨论),不存在则提示登录失败。
基本流程图如下
上面是主要思路,为了打造安全的登录,在使用ajax将密码传到服务器端前,我们可以使用MD5对密码进行加密,当然数据库中存储的也是加密后的字符串。jQuery有一款这样的MD5加密插件,使用十分方便。
流程知道了,就可以方便实现了。以下是一些主要的代码
Default.aspx:主要是提供超链接,点击会调用thickbox,打开弹出页面。
欢迎使用后台,
点击登录!
继续浏览前台,返回前台
login.htm:真正的登录界面,负责登录逻辑
$().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) {
}
});
}
});
});
用户名: |
|
密码: |
|
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加密之后的字符串。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
php在登录页面使用ajax,使用Ajax安全的登录界面相关推荐
- vue编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
- html怎样做登录页面,使用HTML 5和CSS3制作登录页面完整步骤
本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程. login.html Log In Forgot your password?Register 所用到的HTML 5的特性: ◆ ...
- spring boot 自动跳转登录页面_徒手撸一个扫码登录示例工程
徒手撸一个扫码登录示例工程 不知道是不是微信的原因,现在出现扫码登录的场景越来越多了,作为一个有追求.有理想新四好码农,当然得紧跟时代的潮流,得徒手撸一个以儆效尤 本篇示例工程,主要用到以下技术栈 q ...
- java制作网易邮箱登录页面_Page Object实例(一) - Java + Selenium 登录163邮箱
Page Object 是什么: Page Object(selenium wiki)是Selenium2开始提供的一种代码设计模式. 其核心思想是把web页面的元素查找及操作和页面测试分离开. 这样 ...
- 登录页面ajax提交
一: jsp登录页面: <body><h1 align="center">用户登录</h1><div align="center ...
- 解决AJAX在用户登录失效后返回登录页面的问题
后端AJAX API,Session过期,登录失效,直接跳转(redirect)到登录页.(后端Shiro.Spring Security等都支持这个功能) 对于全站AJAX的应用,当然不存在redi ...
- SpringSecurity+Mybatis实现用户自助注册登录(含角色),打造简单安全的注册登录页面。
#项目架构.功能点 架构: Springboot2.5.+ MySQL数据库8.0+(记录用户信息.角色清单.用户角色对照表) 持久层Mybatis 用户注册页面RegisterPage采用Thyme ...
- jsp+servlet实现简单登录页面功能Demo
小白新路历程-1 实现功能: 模拟简单登录功能,登录成功跳转新页面,登录失败在原登录界面提示登录失败信息 开发环境: eclipse Tomcat-8.0 预备知识: HTML标签,Servlet相关 ...
- iview-admin源码分析(三):登录页面及逻辑实现
目录 前言 正文 一.登录页面 安装 vue-router config 配置文件 1.App.vue 2.login 页面 安装 less-loader 2.1.login-form.vue 布局代 ...
- SharePoint2013自定义登录页面
SharePoint默认创建的WebApplication是基于windows的身份验证模式,以弹出窗口方式进行身份输入登录.这种方式可能对于国内的企业用户来说感觉不是很友好.一般而言,我们会把这种登 ...
最新文章
- win10 应用程序 快捷启动
- 如何应対syn flood
- 应用化学:类卤代甲烷CH3X结构的神经网络
- 【ElasticSearch系列】简单谈谈kibana-由安装marvel插件而来
- Linux下如何简单删除/data的空目录
- php 取经纬度,php根据地址获取百度地图经纬度的实例方法
- 童程童美机器人编程上海虹口校区_呼市童程童美少儿编程学习中心
- java创建response对象_javaweb入门-----request与response的作用
- 织梦html底部文件,织梦dedecms程序如何给网站底部添加360监控的步骤
- Python3 写入文件
- webstorm主题更换和webstorm汉化
- WIN7 32 联想针式打印机 联想DP600+ 文字不全
- 不登陆QQ也能使用QQ截图工具
- 索尼 swiftkey_iOS8 3rd Party键盘的评测-SwiftKey和Swype
- AppleID忘记密保问题,同时未开启双重认证,需要签署新的协议才能进行下载或者开发的情况处理
- 夜空中的守望者的目光
- android实现字体可复制,特殊字体生成器能复制app下载
- Echarts的常用api
- 普通二本,学这些东西,也能进大厂
- 搭建个人博客(论坛)的建议