富贵资源网 Design By www.hznty.com
好了,唠嗑就到这里,现在看如何用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="/UploadFiles/2021-04-02/img.ashx"></td>
</tr>
<tr>
<td>
<input type="button" onclick="login();" value="登录" />
</td>
<td>
</td>
</tr>
</table>
这里面包含的功能有:登录的验证,点击更换验证码。这个没有什么好说的。
下面是jquery的部分
复制代码 代码如下:
<script src="/UploadFiles/2021-04-02/jquery-1.4.1.min.js"><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("验证码错误!");
}
}
这是判断登录的代码。
好了,以上就是核心代码,希望大家多多指教。也希望我的笔记对您有用
首先先创建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="/UploadFiles/2021-04-02/img.ashx"></td>
</tr>
<tr>
<td>
<input type="button" onclick="login();" value="登录" />
</td>
<td>
</td>
</tr>
</table>
这里面包含的功能有:登录的验证,点击更换验证码。这个没有什么好说的。
下面是jquery的部分
复制代码 代码如下:
<script src="/UploadFiles/2021-04-02/jquery-1.4.1.min.js"><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("验证码错误!");
}
}
这是判断登录的代码。
好了,以上就是核心代码,希望大家多多指教。也希望我的笔记对您有用
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。