asp.net+jquery ajax无刷新登录的实现方法
更新时间:2013年06月12日 15:07:25 作者:
asp.net+jquery ajax无刷新登录的实现方法,需要的朋友可以参考一下
因为工作需要研究了一下 js的ajax,下面是成果。
主要是三部分:
一、js部分 友情提示注意js部分中的 $("#btn_login")中的return false;这个可以阻止回转服务器不然还是会刷新
$(document).ready(function () {
$("#btn_login").click(function () {
postlogin();
return false;
});
});
function postlogin() {
if (checkUserName() && checkUserPwd()) {
var username = $('#txt_loginname').val();
var userpass = $('#txt_loginpass').val();
$.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) {
if (result == "1") {
alert("登录成功!");
} else if (result == "3") {
alert("用户名不正确!");
} else if (result == "2") {
alert("密码不正确!");
} else {
alert("登录失败!请重试!" + result);
}
});
}
}
function checkUserName() {
if ($("#txt_loginname").val().length == 0) {
alert('用户名不能为空!');
return false;
} else {
return true;
}
}
function checkUserPwd() {
if ($("#txt_loginpass").val().lenght == 0) {
alert('密码不正确!');
return false;
} else {
return true;
}
}
二、页面部分
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" height="37" valign="middle">用户名:</td>
<td width="68%" valign="middle">
<input type="text" name="txt_loginname" id="txt_loginname" class="input_1"/>
</td>
</tr>
<tr>
<td height="37" valign="middle">密 码:</td>
<td valign="middle">
<input type="password" name="txt_loginpass" id="txt_loginpass" class="input_2"/>
</td>
</tr>
<!--<tr>
<td height="37" valign="middle">验证码:</td>
<td valign="middle">
<input type="text" name="textfield3" id="textfield3" class="input_3" style="float:left"/>
<span style="float:left; margin-left:6px;"><img src="images/img_7.gif" /></span></td>
</tr>-->
<tr>
<td colspan="2">
<input type="image" name="btn_login" id="btn_login" src="images/img_4.gif" />
<input type="image" name="input" src="images/img_5.gif" />
<input type="image" name="input" src="images/img_6.gif" />
</td>
</tr>
</table>
三、后台部分也就是在js中转向的处理登录信息的页面
protected void Page_Load(object sender, EventArgs e)
{
string username = Request.Form["UserName"];
string userpass = Request.Form["UserPass"];
T_User user = UserManager.loginpassword(username, userpass);
if (user != null)
{
Session["user"] = user;
Response.Write("1"); //登录成功
Response.End();
}
else
{
if (UserManager.OnlyOne(username) >= 1)
{
Response.Write("2"); //密码不正确
Response.End();
}
else
{
Response.Write("3"); //用户名不存在
Response.End();
}
}
}
主要是三部分:
一、js部分 友情提示注意js部分中的 $("#btn_login")中的return false;这个可以阻止回转服务器不然还是会刷新
复制代码 代码如下:
$(document).ready(function () {
$("#btn_login").click(function () {
postlogin();
return false;
});
});
function postlogin() {
if (checkUserName() && checkUserPwd()) {
var username = $('#txt_loginname').val();
var userpass = $('#txt_loginpass').val();
$.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) {
if (result == "1") {
alert("登录成功!");
} else if (result == "3") {
alert("用户名不正确!");
} else if (result == "2") {
alert("密码不正确!");
} else {
alert("登录失败!请重试!" + result);
}
});
}
}
function checkUserName() {
if ($("#txt_loginname").val().length == 0) {
alert('用户名不能为空!');
return false;
} else {
return true;
}
}
function checkUserPwd() {
if ($("#txt_loginpass").val().lenght == 0) {
alert('密码不正确!');
return false;
} else {
return true;
}
}
二、页面部分
复制代码 代码如下:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" height="37" valign="middle">用户名:</td>
<td width="68%" valign="middle">
<input type="text" name="txt_loginname" id="txt_loginname" class="input_1"/>
</td>
</tr>
<tr>
<td height="37" valign="middle">密 码:</td>
<td valign="middle">
<input type="password" name="txt_loginpass" id="txt_loginpass" class="input_2"/>
</td>
</tr>
<!--<tr>
<td height="37" valign="middle">验证码:</td>
<td valign="middle">
<input type="text" name="textfield3" id="textfield3" class="input_3" style="float:left"/>
<span style="float:left; margin-left:6px;"><img src="images/img_7.gif" /></span></td>
</tr>-->
<tr>
<td colspan="2">
<input type="image" name="btn_login" id="btn_login" src="images/img_4.gif" />
<input type="image" name="input" src="images/img_5.gif" />
<input type="image" name="input" src="images/img_6.gif" />
</td>
</tr>
</table>
三、后台部分也就是在js中转向的处理登录信息的页面
复制代码 代码如下:
protected void Page_Load(object sender, EventArgs e)
{
string username = Request.Form["UserName"];
string userpass = Request.Form["UserPass"];
T_User user = UserManager.loginpassword(username, userpass);
if (user != null)
{
Session["user"] = user;
Response.Write("1"); //登录成功
Response.End();
}
else
{
if (UserManager.OnlyOne(username) >= 1)
{
Response.Write("2"); //密码不正确
Response.End();
}
else
{
Response.Write("3"); //用户名不存在
Response.End();
}
}
}
您可能感兴趣的文章:
- jQuery Ajax 实现在html页面实时显示用户登录状态
- jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
- jQuery+AJAX实现遮罩层登录验证界面(附源码)
- JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册
- PHP+jQuery+Ajax实现用户登录与退出
- S2SH整合JQuery+Ajax实现登录验证功能实现代码
- div弹出层的ajax登录(Jquery版+c#)
- 基于jquery ajax 用户无刷新登录方法详解
- jQuery.ajax 用户登录验证代码
- jQuery+Ajax用户登录功能的实现
- jquery ajax 登录验证实现代码
- jQuery基于ajax实现页面加载后检查用户登录状态的方法
相关文章
asp.net(c#)Enterprise Library 3.0 下载
asp.net(c#)Enterprise Library 3.0 下载...2007-04-04解决Visual Studio 2005 无法显示设计视图的方法
解决Visual Studio 2005 无法显示设计视图的方法...2007-04-04Entity Framework生成DataBase First模式
本文详细讲解了Entity Framework生成DataBase First模式的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-03-03ASP.NET.4.5.1+MVC5.0设置系统角色与权限(二)
这篇文章主要介绍了使用ASP.NET.4.5.1+MVC5.0构建项目中设置系统角色的全部过程,十分的详细,附上全部源码,推荐给想学习.net+mvc的小伙伴们2015-01-01System.Runtime.InteropServices.COMException的解决方法
完美解决“换另一台电脑上用VS2008继续开发web项目时出现“System.Runtime.InteropServices.COMException”,然后是加载不了项目。”2009-03-03
最新评论