ajax異步登陸和跨域刷新頁面

時間 2019-11-10

標籤 ajax 異步登陸刷新頁面欄目 Ajax 简体版

原文原文鏈接

對於子頁面刷新父頁面，好比在a.html中嵌套了一個iframe，裏面是b.html。若是a.html和b.html是同一個域，則操做b.html時要刷新父頁面a.html時，很簡單，經過js就能完成，在b.html中要刷新父頁面的操做中加入js代碼parent.location.reload();便可。javascript

但若是a.html和b.html是來自兩個不一樣的域，即b.html是從另外一個域嵌套進來的，這時經過上面的js代碼是達不到刷新父頁面的目的的。這時可作一個變通的處理，即js代碼能夠這樣寫：parent.location=「www.abc/a.html」；parent.location.reload();css

其實就是寫出a.html的完整路徑，而後刷新這個路徑便可（其中abc是我假定的一個域名）。html

關於跨域刷新，一個典型的應用就是利用ajax異步登陸，而登陸的iframe來自另外一個域，嵌套在當前頁中（如首頁），這麼作的目的是爲了在一個域中登陸後，其餘域能夠共享登陸狀態（跨域是經過cookie來實現共享的）。固然，你登陸完後，由於是異步，頁面不會刷新，你固然但願手動刷新一下，將登陸框隱藏（登陸後，存了cookie，判斷cookie是否存在，來判斷是否登陸，依據這個來決定登陸框的隱藏），因此會有上面的解決方案。對於這個案例的，具體代碼以下（後臺的登陸驗證省略）：java

下面是嵌套在主頁的登陸框的jsp代碼，及jquery的異步提交請求：jquery

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<script language="javascript" type="text/javascript" src="../js/login.js"></script>
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" ></script>
<script type="text/javascript">
ajax

//驗證碼的刷新
跨域

                //post方式的異步請求
               $.post('${pageContext.request.contextPath}/index/login.do',
                       {username:$('#username').val(),pwd:$('#pwd').val(),utype:$('#utype').val()},function(data,statusText){
                   if(data=="true"){異步

                        //登陸成功後，跨域刷新父頁面
                       parent.location = "http://119.254.229.93:8080/pub/guojiarencaiggfwtx/junzhanRCW/";
                       parent.location.reload();
                   }else if(data=="false"){
                       $('#s_message').html('用戶名或密碼錯誤');
                   }else if(data=="error"){
                       $('#s_message').html('未知錯誤');
                   }
               },'html');
           }
   });
});
</script>

</head>

<body>
   <div class="main_r" style="float:left; width:261px; height:281px; background:url(../images/rbj2.jpg) no-repeat; overflow:hidden;">
       <p><span class="gr" id="a0" onmouseover="yhshow(0);">我的用戶</span></p>
        <div class="main_r_nr" id="b0">
         <form>
           <ul>
               <li><input name="username" id="username" type="text" class="text1" value="用戶名" onfocus="javascript:if(this.value=='用戶名')this.value='';" onblur="valiusername();" /><span style="color:red" id="s_username"></span></li>
               <li><input name="pwd" id="pwd" type="password" class="text2" value="密碼" onfocus="javascript:if(this.value=='密碼')this.value='';" onblur="valipwd();" /><span style="color:red" id="s_pwd"></span></li>
               <li><span class="fl"><input class="duan" name="vcodeStr" id="vcodeStr" type="text" value="驗證碼" onfocus="javascript:if(this.value=='驗證碼')this.value='';" onblur="codeCheck();" /></span>
                   <span class="yzm"><img alt="換一張" src="${pageContext.request.contextPath}/servlet/validateImage" onclick="changeImage(this);" style="cursor:hand;width:49;height:26;" /></span>
                   <span style="color:red" id="vcodemessage"></span>
               </li>
               <li class="li4"><span class="checkbox"><input id="checkbox" type="checkbox" checked="checked" /></span><span class="wz">(我的)已閱讀並贊成相關服務條款</span></li>
               <li class="li5" style="padding-left:40px;"><span class="yhdl"><input id="submit" type="button" value="" /></span><span id="s_message" style="color:red;" ></span></li>
            </ul>
          </form>
        </div>
    </div>
</body>
</html>jsp