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();
                }
            }
        }

(0)

相关推荐

  • jQuery.ajax 用户登录验证代码

    复制代码 代码如下: $.ajax({ type: "post", url: "Handler1.ashx", data: { username: "admin", password: "123" }, success: successHandle }); function successHandle(rep) { $("#msg").html(rep); }

  • jQuery+Ajax用户登录功能的实现

    ok,先来贴几张张效果图. 其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面可以算是简易的aspx页面吧. 当然你用LoginProcess.aspx 也是可以的.Login.ashx页面处理完把结果返回给Login.aspx页面处理,result变量用与接收结果. 如果返回1表示登录成功,

  • jQuery Ajax 实现在html页面实时显示用户登录状态

    当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

  • jQuery基于ajax实现页面加载后检查用户登录状态的方法

    本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然

  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

  • jquery ajax 登录验证实现代码

    使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax : 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件: 在 webRoot 下新建一个 html/jsp 页面: login.html 复制代码 代码如下: <script type = "text/javascript" src = "jslib/jquery.js"></ script> <script type = &qu

  • PHP+jQuery+Ajax实现用户登录与退出

    用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库 本例我们使用Mysql数据库,创建一张user表,表结构如下: CREATE TABLE `user` ( `id` int(11) NOT NULL auto_increment, `username` varchar(30) NOT NULL COMMENT '用户名', `password` v

  • div弹出层的ajax登录(Jquery版+c#)

    页面初始化,界面如图所示: Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码): 可以加载SQL Server服务列表,也是我的简易SQL查询分析器评论中静夜妙思给予的方法,非常感谢! 加载列表如下图所示: 可以随意地点击添加到Server name中,登录时截图所示: 文本框验证都写好了!还有Authentication验证方式,windows验证下面Login,Password文本框禁掉!由于时间原因,不上图了 demo.html(全部前台代码,js/css

  • 基于jquery ajax 用户无刷新登录方法详解

    Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

  • JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册

    最近在仿造一个书城的网站: http://www.yousuu.com ,UI直接拿来用,前端后端自己写,目前大部分功能已经实现, 就把具体的 登录注册功能 拿来分享一下.PS:又写登录注册会不会被人喷啊=.= 一.开发环境的部署 程序结构: BootStrap+Ajax+Struts2+Hibernate+MySql 仅供参考:能实现相关功能即可 操作系统:ubuntu 14.10 前端框架:BootStrap   注:此框架只是为了实现用户界面,和具体功能无关 数据库:mysql-5.5 数

  • jQuery+AJAX实现遮罩层登录验证界面(附源码)

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

  • S2SH整合JQuery+Ajax实现登录验证功能实现代码

    不多说了,上码 action 复制代码 代码如下: package com.lk.action; import javax.annotation.Resource; import com.googlecode.jsonplugin.annotations.JSON; import com.lk.service.StudentControl; import com.opensymphony.xwork2.ActionSupport; public class LoginAjaxAction ext

随机推荐