文档章节

ajax异步登录和跨域刷新页面

wangrikui
 wangrikui
发布于 2014/01/20 23:55
字数 1132
阅读 3165
收藏 1

对于子页面刷新父页面,比如在a.html中嵌套了一个iframe,里面是b.html。如果a.html和b.html是同一个域,则操作b.html时要刷新父页面a.html时,很简单,通过js就能完成,在b.html中要刷新父页面的操作中加入js代码parent.location.reload();即可。

但如果a.html和b.html是来自两个不同的域,即b.html是从另一个域嵌套进来的,这时通过上面的js代码是达不到刷新父页面的目的的。这时可做一个变通的处理,即js代码可以这样写:parent.location=“www.abc/a.html”;parent.location.reload();

其实就是写出a.html的完整路径,然后刷新这个路径即可(其中abc是我假定的一个域名)。

关于跨域刷新,一个典型的应用就是利用ajax异步登录,而登录的iframe来自另一个域,嵌套在当前页中(如首页),这么做的目的是为了在一个域中登录后,其他域可以共享登录状态(跨域是通过cookie来实现共享的)。当然,你登录完后,因为是异步,页面不会刷新,你当然希望手动刷新一下,将登录框隐藏(登录后,存了cookie,判断cookie是否存在,来判断是否登录,依据这个来决定登录框的隐藏),所以会有上面的解决方案。对于这个案例的,具体代码如下(后台的登录验证省略):

下面是嵌套在主页的登录框的jsp代码,及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">

//验证码的刷新

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()){ //校验通过的判断

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


附:前台验证的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;
     }

© 著作权归作者所有

wangrikui
粉丝 10
博文 31
码字总数 20614
作品 0
南京
后端工程师
私信 提问
ajax与jsonp跨域的本质原理

ajax的基本概念 了解这个概念,首先得先知道同步交互与异步交互 同步交互:客户端浏览器给服务器发送一个请求,服务器返回一个页面,返回的页面会把之前的页面覆盖掉,我们把这种交互方式称为...

云焱
2017/11/11
0
0
Ajax原理介绍及跨域解决方案

1.Ajax原理介绍 Ajax 全名叫"Asynchronous Javascript And XML" (异步的Javascript and XML),是一种创建交互式网页应用的网页开发技术 与传统的web应用比较,ajax 应用可以仅向服务器发送并...

陈小扁
2016/03/17
87
2
ajax

ajax是什么呢?他就是异步的javascript,用js写个完整的ajax代码并不是很多,它是能够在不刷新页面的情况下,让网页局部数据更新的数据 1. 创建对象 2. 发送请求 第一个参数:get和post两种方...

马大哈tt
2017/11/14
0
0
【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?

前言 ajax已经流行很多年了,现在来说它是否已经晚了呢???特别是有这样框架那样框架后,还有几个人认识原生ajax呢?我们每天都会用到的东西你到底对他了解吗? 在最近一次面试上不幸被问到...

范大脚脚
2017/12/14
0
0
前后端分离 | 关于登录状态那些事

背景 登录是一个网站最基础的功能。有人说它很简单,其实不然,登录逻辑很简单,但涉及知识点比较多,如: 密码加密、cookie、session、token、JWT等。 我们看一下传统的做法,前后端统一在一...

小忽悠
2018/10/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
15
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.4K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部