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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery学习笔记 用jquery实现无刷新登录，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2382字，纯文字阅读大概需要4分钟。

内容图文

<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("验证码错误！"); 
} 
} 
 
这是判断登录的代码。 
好了，以上就是核心代码，希望大家多多指教。也希望我的笔记对您有用
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的jquery学习笔记 用jquery实现无刷新登录全部内容，希望文章能够帮你解决jquery学习笔记 用jquery实现无刷新登录所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端