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><!--登陆的前台校验js-->
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" ></script><!--导入juqery文件-->
<script type="text/javascript">
ajax

//验证码的刷新
跨域

function changeImage(img) {
    img.src = img.src + "?" + new Date().getTime();
}
/* ajax校验验证码 */
var flag=false;
function codeCheck() {
    document.getElementById("vcodemessage").innerHTML="";
    var obj=document.getElementById("vcodeStr");
    if(obj.value==""){
        obj.value="验证码";
        return;
    }
    var url = "${pageContext.request.contextPath}/login/codeCheck.do?vcodeStr=" +obj.value+"&time="+new Date();
         $.get(encodeURI(url),null,function(data,statusText){
        if(data=="true"){
            document.getElementById("vcodemessage").innerHTML="经过验证";
            flag=true;
        }else if(data=="false"){
            document.getElementById("vcodemessage").innerHTML="验证码输入错误";
            flag=false;
        }
    },'html');

}
</script>
<script type="text/javascript">
$(function(){
    $('#submit').click(function(){
            if(valisubmit()){ //校验经过的判断cookie

                //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


附:前台验证的js代码

login.js

function valiusername(){     var username=document.getElementById("username");    var span1=document.getElementById("s_username");        span1.innerHTML = '';        if(username.value.length == 0|| username.value.trim() == ''){            username.value="用户名";                      return false;        }        return true; }  function valipwd(){        var pwd=document.getElementById("pwd");    var span1=document.getElementById("s_pwd");               span1.innerHTML = '';                      if(pwd.value.length == 0|| pwd.value.trim() == ''){            pwd.value="密码";            return false;        }        return true; }  function submitusername(){                var username=document.getElementById("username");        var span1=document.getElementById("s_username");                   span1.innerHTML = '';                     if(username.value=='用户名'||username.value.length == 0|| username.value.trim() == ''){                span1.innerHTML = "请输入用户名";                username.value="用户名";                return false;            }                        return true;     } function submitpwd(){                var pwd=document.getElementById("pwd");        var span1=document.getElementById("s_pwd");                     span1.innerHTML = '';                       if(pwd.value == '密码'||pwd.value.length == 0|| pwd.value.trim() == ''){                span1.innerHTML = "请输入密码";                pwd.value="密码";                return false;            }            return true;     } function valisubmit(){         document.getElementById("vcodemessage").innerHTML="";         var obj1=submitusername();         var obj2=submitpwd();         var obj3=document.getElementById("checkbox");         document.getElementById("s_message").innerHTML="";         if(!obj3.checked){             document.getElementById("s_message").innerHTML="请阅读服务条款并赞成";         }         if(!flag){             document.getElementById("vcodemessage").innerHTML="验证码输入错误";         }         return flag&&obj1&&obj2&&obj3.checked;     }

相关文章
相关标签/搜索