jquery学习笔记 用jquery实现无刷新登录


Posted in Javascript onAugust 08, 2011

好了,唠嗑就到这里,现在看如何用jquery实现无刷新登录。
首先先创建html的部分

<table> 
<tr> 
<td> 
用户名: 
</td> 
<td> 
<input type="text" id="username" /> 
</td> 
</tr> 
<tr> 
<td> 
密码: 
</td> 
<td> 
<input type="text" id="password" /> 
</td> 
</tr> 
<tr> 
<td> 
验证码: 
</td> 
<td> 
<input type="text" id="cord" /> 
<img alt="点击更换验证码" title="看不清楚,请单击我!" id="checkcord" src="img.ashx" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="button" onclick="login();" value="登录" /> 
</td> 
<td> 
</td> 
</tr> 
</table>

这里面包含的功能有:登录的验证,点击更换验证码。这个没有什么好说的。
下面是jquery的部分
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>-----------别忘了引用这个链接,否则jquery不能用 
<script type="text/javascript"> 
//用jquery实现无刷新的登录验证 
function login() { 
$.ajax({ 
url: 'Login.ashx', //访问路径 
data: 'username=' + $("#username").val() + "&password=" + $("#password").val() + "&cord=" + $("#cord").val(), //需要验证的参数 
type: 'post', //传值的方式 
error: function () {//访问失败时调用的函数 
alert("链接服务器错误!"); 
}, 
success: function (msg) {//访问成功时调用的函数,这里的msg是Login.ashx返回的值 
alert(msg); 
} 
}); 
} 
//验证码图片 
$(function () { 
$("#username").focus(); 
$("#checkcord").click(function () { 
$("#checkcord").attr("src", "img.ashx?time=" + new Date()); 
}); 
}) 
</script>

大概的核心代码就是这些了,当用户点击登录按钮时,触发login事件,用jquery向Login.ashx发出请求,在Login.ashx当中,仅仅只是验证用户名和密码是否匹配,验证码是否正确。Login.ashx是用C#语言写的,如果你们学习的是别的语言就将地址更换为别的就可以了。
img.ashx是生成验证码的程序,每点击一次图片都会重新访问img.ashx,所以图片是更换的,在生成图片的时候,会生成存储验证码的session,在Login.ashx当中,判断用户输入的值和session的值是否相同就可以了。在这里我只显示主要的源码了。
context.Response.ContentType = "text/plain"; 
string username = context.Request.Form["username"]; 
string password = context.Request.Form["password"]; 
string cord = context.Request.Form["cord"]; 
if (context.Session["cord"] != null) 
{ 
if (context.Session["cord"].ToString() == cord) 
{ 
if (username == "admin" && password == "admin") 
{ 
context.Response.Write("登录成功!"); 
} 
else 
{ 
context.Response.Write("登录失败!用户名和密码错误!"); 
} 
} 
else 
{ 
context.Response.Write("验证码错误!"); 
} 
}

这是判断登录的代码。
好了,以上就是核心代码,希望大家多多指教。也希望我的笔记对您有用
Javascript 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
浅谈jquery事件处理
Apr 24 Javascript
Express框架之connect-flash详解
May 31 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 #Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 #Javascript
基于jQuery的前端数据通用验证库
Aug 08 #Javascript
JS基础之undefined与null的区别分析
Aug 08 #Javascript
jQuery的12招常用技巧分享
Aug 08 #Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 #Javascript
jquery动态加载图片数据练习代码
Aug 04 #Javascript
You might like
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python爬虫实例详解
2018/06/19 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Python 解析xml文件的示例
2020/09/29 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL