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 相关文章推荐
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
jQuery拖动图片删除示例
May 10 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
php微信开发之谷歌测距
2018/06/14 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
jQuery实现全选按钮
2021/01/01 jQuery
python 数据加密代码
2008/12/24 Python
深入理解python对json的操作总结
2017/01/05 Python
python实现音乐下载器
2018/04/15 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
10个顶级Python实用库推荐
2021/03/04 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
考博专家推荐信
2014/05/10 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
北京英语导游词
2015/02/12 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python