怎样实现不跳转页面新建一个层进行用户登陆？在线等答案！！着急啊！

路过打广告.楼主别删。谢谢。（新建的.net交流群59714431.欢迎喜欢交流的朋友加入）

var obj=document.creatElement("div");
obj.id="login";
......

首先,添加一个DIV,它要在最上层,还要占满整个屏幕,它要有alpha透明滤镜,这些都是CSS.
然后在DIV里放个表单拿来登录.发送请求——当然是AJAX.
根据返回结果,判断出错信息,或是成功了,移除掉这个DIV.最后告诉你一声:我从来没做过这个....

用aspx的里面的自定义便签加上局部刷新的控件updatepanle和scripmanager控件就可以做。。前阶段刚做个。。

以前做的，好像是登陆的吧，我都没细看，呵呵，可能有很多其它乱七八糟的，去掉就好了，主要就是前面一段东西。。<%@ page language="java" pageEncoding="UTF-8"%><%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<%String path=request.getContextPath(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
  <head>
    <html:base />

    <title>products.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>acesysweb</title>
<link href="<%=path%>/css/index.css" rel="stylesheet" type="text/css" />

<script language="javascript">
var usernameable;
function send_request(url)
{//初始化、指定处理函数、发送请求的函数
   //alert("url\t"+url);
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest)
{ //Mozilla 浏览器
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType)
{//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if(window.ActiveXObject)
{ // IE浏览器
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
if(!http_request)
{ // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;

// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("POST", url, false);
http_request.send(null);
}
// 处理返回信息的函数
    function processRequest()
    {
        if (http_request.readyState == 4)
        { // 判断对象状态
         //alert(http_request.readyState);
            if (http_request.status == 200)
            { // 信息已经成功返回，开始处理信息
               usernameable = http_request.responseText;
               //alert(document.getElementById('checkUsername').usernameable);
//alert(usernameable);
if (usernameable == 0) {
document.getElementById('checkUsername').innerHTML="The username or password error, Try again";
document.forms[0].elements(0).focus();
document.forms[0].elements(0).select();
return false;
} else {
return true;
}
            }
           // var usernameable = http_request.responseText;
        }
    }
function initLocal() {
document.forms[0].username.value = "";
document.forms[0].elements(0).focus();
document.forms[0].elements(0).select();
}
function searchUsername() {
if(document.forms[0].username.value == "") {
        document.forms[0].elements(0).focus();
        document.getElementById('checkUsername').innerHTML="Please input your username";
        return false;
    } else {
     if (document.forms[0].password.value == "") {
     document.forms[0].elements(1).focus();
     document.getElementById('checkUsername').innerHTML="Please input your password";
     return false;
     }
usernamejs = document.forms[0].username.value;
passwordjs = document.forms[0].password.value;
send_request('<%=path%>/login.do?usernamejs='+ usernamejs + '&&passwordjs=' + passwordjs);
if (usernameable == 0)
return false;
return true;
}
}
</script>  </head>

<body onload="initLocal()">
<html:form  method="post" action="/login">
<div class="head">
  <div id="login_1"></div>
<div id="login_2"></div>
<div id="login_3"></div>
<div class="img"><img src="../images/web_4.jpg" width="277" height="128"/></div>
<div class="img"><img src="../images/web_5.jpg" width="273" height="128"/></div>
<div class="img"><img src="../images/web_6.jpg" width="250" height="128"/></div>
<div id="bannerbj"></div>
<div id="bannerbj2">
<div class="banner_wenzi">　　　　　　| <a href="<%=path %>/index.html">Home</a>　　| R&D Service　　| <a href="products.jsp">Products</a>　　| Career　　| Sales Policy　　| Contact Us　　</div>
</div>
<div id="bannerbj1"></div>
</div>
<div class="head">
  <div class="left_products">
<div class="img"><img src="<%=path %>/images/products_02.jpg" width="189" height="32"/></div>
<div class="left_bj">
<div class="big_k">
<div class="loading_p">Username:
  <html:text property="username" size="10"/>
  </div>
<div class="loading_p">Password:
  <html:password property="password" size="10"/>
  <div id="checkUsername" class="warning"></div><br>
</div>
<div class="loading_ll"><html:image src="../images/login_1_7.jpg" border="0" onclick="javasript: return searchUsername()"><html:submit/></html:image></div>
<div class="loading_l"><a href="register.jsp"><img src="<%=path %>/images/login_1_3.jpg" width="67" height="17" border="0"/></a></div>
</div>
</div>
</div>
<div class="right_proaducts">Home >> Product  </div>
<div class="p_ny">
<div class="md_wenzi">Product information </div>
</div>
<div class="border"></div>
<div class="p_wenzikuang">
<div class="md_wenzi">

   AstaTech, Inc. offers advanced and novel intermediates for worldwide pharmaceutical, biotech and agroche mical drug research & development. Our catalog is up to date with over 1500 drug-like products. More than fifty new compounds are added to the product list every month. Our broad types of advanced intermediates, including building blocks, novel amines, protected amines, unnatural amino acids, ketones, aldehyde, heterocycles, isatoic anhydrides, boroinc acids and chiral intermediates can accelerate your drug research process.

        AstaTech also offers semi bulk intermediates (up to 10 kilograms), bulk intermediates (to tons), drug raw materials and their intermediates in reasonable price and good quality. Please visit<html:link action="/productDisplay.do"> Browse Product </html:link>page.
      <br/>
        The catalog can be viewed on-line either by <html:link action="/productDisplay.do"> Browse Product </html:link>or by<a href="productsSearch.jsp"> Search Product</a>. <br />
        If you prefer to receive our catalog electronically (either in PDF or SD format), please e-mail us
  </div>
</div>
<div class="zuihou">
<div class="copyright">Copyright .2007 Acesysweb Tech Co., Ltd. All rights reserved.</div>
</div>
</div>
</html:form>
</body>
</html:html>

其实很简单的
这个就只是在页面加载完时就调用显示隐藏DIV的登录窗口，并且该窗口的登录代码是利用AJAX返回信息的，如果返回信息正确，那么就隐藏DIV，并且刷新当前页

给个静态的例子你看看就知道了，其他登陆成功啊，失败啊，你自己去处理就OK了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>dynamicSelet</title>
<script language="javascript">
var bgObj;
var bgIframe;
function sAlert(divID) {
    var msgw,msgh,bordercolor;
    msgw = 400;
    msgh = 100;
    titleheight = 25;
    bordercolor = "#336699";
    titlecolor = "#99CCFF";
    var sWidth,sHeight;
    sWidth = document.body.offsetWidth;
    sHeight = screen.height;
    bgObj = document.createElement("div");
    bgObj.setAttribute('id', 'bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.top = "0";
    bgObj.style.background = "#777";
    bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity = "0.6";
    bgObj.style.left = "0";
    bgObj.style.width = sWidth + "px";
    bgObj.style.height = sHeight + "px";
    bgObj.style.zIndex = "10000";
    bgIframe = document.createElement("iframe");
    bgIframe.setAttribute("id", "bgIframe");
    bgIframe.style.position = "absolute";
    bgIframe.style.top = "0";
    bgIframe.style.background = "#777";
    bgIframe.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,";
    bgIframe.style.width = sWidth + "px";
    bgIframe.style.height = sHeight + "px";
    bgObj.style.zIndex = "9999";
    document.body.appendChild(bgIframe);
    document.body.appendChild(bgObj);
    var msgObjj = document.getElementById('msgDiv');
    msgObjj.style.display = "block";
    document.getElementById(divID).style.display = "block";
}
function removeObj() {
    document.body.removeChild(bgObj);
    document.body.removeChild(bgIframe);
    document.getElementById("msgDiv").style.display = "none";
}
</script>
</head>
<body onload="sAlert('msgDiv')">
<h1><b>欢迎您成功登陆！</b></h1>
<div id="msgDiv" align="center"
     style="display:none;background-color:#FAEBD7; border:1px solid #336699; position:absolute; left:50%; top:20%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:1px; width:400px; height:300px; text-align:center; line-height:25px; z-index:100001;">
        <table border="0" cellpadding="0" cellspacing="0" width=400px; height=50px>
            <tr>
                <td>用户名</td>
                <td><input type="text" id="username" name="username"></td>
             </tr><tr>
                <td>密码</td>
                <td><input type="password" id="pass" name="pass"></td>
            </tr>
            <tr>
                <td align="center"><input type="button" value="登陆成功" onClick="removeObj()"></td>
                <td align="center"><input type="button" value="登陆失败" onClick="alert('登陆失败！')"></td>
            </tr>
        </table>
</div>
</body>
</html>

ajax,
代码百度去搜一下应该有

先写好登陆后的div隐身，在登陆后显示出来

就是个div,登陆的时候用ajax实现,查一下模态框就知道怎么玩了.
关键是个浮动的效果,好像是z-index属性吧

调试易

怎样实现不跳转页面新建一个层进行用户登陆？在线等答案！！着急啊！

解决方案 »