jquery学习笔记 用jquery实现无刷新登录
jquery学习笔记 用jquery实现无刷新登录
发布时间:2016-12-30 来源:查字典编辑
摘要:好了,唠嗑就到这里,现在看如何用jquery实现无刷新登录。首先先创建html的部分复制代码代码如下:用户名:密码:验证码:这里面包含的功能...

好了,唠嗑就到这里,现在看如何用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" 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教程学习
编程开发子分类