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判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
python中ConfigParse模块的用法
2014/09/29 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python3 下载网络图片代码实例
2019/08/27 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Django操作session 的方法
2020/03/09 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
点菜员岗位职责范本
2014/02/14 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python