手把手带你 Ajax 实现异步登录和跨域刷新页面
Posted 前端技术精选
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手把手带你 Ajax 实现异步登录和跨域刷新页面相关的知识，希望对你有一定的参考价值。
12点00分准时推送，第一时间送达
来自：Francecil | 编辑：前端妹
链接：juejin.im/post/5e9268c9f265da47a83131c6
往期最热：
6、
正文
对于子页面刷新父页面，比如在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>
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;
}
喜欢本文的朋友们，欢迎长按下图关注订阅号
收看更多精彩内容
你在看吗？一起成长
以上是关于手把手带你 Ajax 实现异步登录和跨域刷新页面的主要内容，如果未能解决你的问题，请参考以下文章
ajax背景ajax对象ajax状态ajax与httpajax请求数据接口同步与异步ajax请求XML数据封装ajax函数artTemplate简介同源策略和跨域请求JSONP
Vue--axios：vue中的ajax异步请求（发送和请求数据）vue-resource异步请求和跨域
jQuery中的ajaxjquery中ajax全局事件load实现页面无刷新局部加载ajax跨域请求jsonp利用formData对象向服务端异步发送二进制数据