ajax登陆框实现弹出层登录效果

 代码如下 复制代码

var xmlHttp;
function createXMLHttpRequest()
{
    try
    {
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(sc)
        {
            xmlHttp = null;
        }
    }

    if( !xmlHttp && typeof XMLHttpRequest != "undefined" )
    {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}
function showDiv()
{
    var iWidth = document.documentElement.clientWidth;
    var iHeight = document.documentElement.clientHeight;
    var bgObj = document.getElementById("divbg");
    bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:1;";

    // 获得事件Event对象,用于兼容IE和FireFox
    function getEvent()
    {
        return window.event || arguments.callee.caller.arguments[0];
    }
    document.getElementById('popDiv').style.display='block';
    document.getElementById('divbg').style.display='block';
}

function closeDiv()
{
    document.getElementById('popDiv').style.display='none';
    document.getElementById('divbg').style.display='none';
}

function readPDF(FDF_ID)
{
    var url = "readpdf.aspx?login=false&id=" + FDF_ID + "&r=" + Math.random();
    start_Login(url);
}
function Subscribe()
{
    var url = "Subscribe.aspx?Subscribe=true&login=false&r=" + Math.random();
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleState_Subscribe;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function start_Login(url)
{
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleState_Login;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function handleState_Login()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            var j = xmlHttp.responseText.parseJSON();
            if(j.islogin == "false")
            {
                alert(j.Reason);
                showDiv();
            }
            else
            {
                //debugger
                closeDiv();
                if(j.exitfile == "true")
                {
                    //alert(j.filepath);
                    top.location.href = "http://" + window.location.host + "/" +j.filepath;
                }
                else
                {
                    if(j.Reason == "")
                    {
                        alert(j.filepath);
                    }
                    else
                    {
                        alert(j.Reason);
                    }
                }
            }
        }
    }  
}

function handleState_Subscribe()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            var j = xmlHttp.responseText.parseJSON();
            if(j.islogin == "false")
            {
                alert(j.Reason);
                showDiv();
            }
            else
            {
                alert(j.Reason);
                closeDiv();
            }
        }
    }  
}

function pop_Login()
{
    var UserName = document.getElementById("pop_username").value;
    if(UserName.length == 0)
    {
        alert("请输入用户名");
        return false;
    }
    var PassWord = document.getElementById("pop_password").value;
    if(PassWord.length == 0)
    {
        alert("请输入密码");
        return false;
    }
    if(UserName.length > 0 && PassWord.length > 0)
    {
        var url = "readpdf.aspx?Login=true&UserName=" + UserName + "&PassWord=" + PassWord + "&r=" + Math.random();
        start_Login(url);
    }
}

function Subscribe_Login()
{
    var UserName = document.getElementById("pop_username").value;
    if(UserName.length == 0)
    {
        alert("请输入用户名");
        return false;
    }
    var PassWord = document.getElementById("pop_password").value;
    if(PassWord.length == 0)
    {
        alert("请输入密码");
        return false;
    }
    if(UserName.length > 0 && PassWord.length > 0)
    {
        var url = "Subscribe.aspx?Subscribe=true&login=true&UserName=" + UserName + "&PassWord=" + PassWord + "&r=" + Math.random();
        createXMLHttpRequest();
        xmlHttp.onreadystatechange = handleState_Subscribe;
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
    }
}

调用 方法

 代码如下 复制代码

<a href="javascript:showDiv();">登录</>就可以了

后面的aspx文件,你只要按正常的登录设置session值再返回1,0状态就好了。

时间: 2024-10-29 05:59:50

ajax登陆框实现弹出层登录效果的相关文章

asp.net +jquery 弹出层登录效果

页面加载完成时: 当验证码得到焦点时: 实现这个ajax为了节约时间,用户名/密码/验证码我都没判断是否为空,我也没用数据库,登录用户名和密码都是admin 登录成功时: 这里说明一下,由于时间有限,你可以把这个登录成功或者登录失败,效果做一下,直接在登录窗口上放一个<div id="message"><div>然后设置其样式,把提示内容追加上去,根据自己个人需求来,下面贴我的全部代码: 下面我们一个个文件来看login.htm文件  代码如下 复制代码 <

原生js实现弹出层登录拖拽功能_javascript技巧

在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有? 留言墙.弹出框等一些常见地方都有拖拽功能,方便用户体验嘛. 实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理. 之前做的比较多的留言墙效

jquery实现的弹出层登录和全屏层注册特效代码分享_jquery

本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图:                           -------------------查看效果 下载源码-----------------

AJAX简单应用实例-弹出层_应用技巧

function createobj() {  if (window.ActiveXObject) {          return(new ActiveXObject("Microsoft.XMLHTTP"));      }      else if (window.XMLHttpRequest) {          return(new XMLHttpRequest());      } } function personalInfo() {   var oBao=creat

jquery实现弹出层遮罩效果的简单实例

 这篇文章主要介绍了jquery实现弹出层遮罩效果的简单实例.需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <input type="button" value="高级搜索" id="click_test4" />"; var content4 = "<center>高级搜索</center><form action='' method='post' id='formUse

js怎么实现弹出层登录拖拽功能

在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有? 留言墙.弹出框等一些常见地方都有拖拽功能,方便用户体验嘛. 实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理. 之前做的比较多的留言墙效

ajax layer-关于layer弹出层内容 显示ajax取得的数据

问题描述 关于layer弹出层内容 显示ajax取得的数据 代码 $.ajax({ type:'POST', url: 'hhWebsiteInfoController.do?website-getDt', dataType:'json', data:'', success:function(json){ alert(1); var dts = json.attributes.dts; $("#news").empty(); var quanju = dts; if(typeof(dt

Js实现点击超链接弹出层,效果仿Discuz登录!

主要应用到的是dispaly:none 和 dispaly:block;来控制实现的:  <a id="link" href="#" onclick="linkonclick()">登录</a>这里还有一种写法  <a href="javascript:linkonclick()">登录</a>  两种效果是一样的:   View Code <!DOCTYPE html P

jquery原创弹出层折叠效果点击折叠弹出一个层

 今天整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息,感兴趣的朋友可以学习下 弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可.    html:   代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1>