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 相关文章推荐
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php导出CSV抽象类实例
2014/09/24 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
幼儿教师研修感言
2014/02/12 职场文书
工程项目建议书范文
2014/03/12 职场文书
成语的广告词
2014/03/19 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript