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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
使用angular写一个hello world
Jan 23 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
javascript 实现map集合
Apr 03 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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中执行系统外部命令
2006/10/09 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
php实现图片缩略图的方法
2016/03/29 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python教程之全局变量用法
2016/06/27 Python
遗传算法之Python实现代码
2017/10/10 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python中while和for的区别总结
2019/06/28 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python logging日志模块原理及操作解析
2019/10/12 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
护士毕业自我鉴定
2014/02/07 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
社区服务标语
2014/07/01 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
创业计划书之书店
2019/09/10 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle