在IE、fixfox、chrome等浏览器中ajax提交成功后,打开新标签页面被浏览器拦截问题
2015-09-16 21:42
405 查看
最近做了一个项目,在项目中涉及到先向后端发送ajax请求,根据ajax返回的结果来觉得是否跳转。刚开始我是这样做的。代码如下:
提交的表单:
<form action="" method="post" id="rtbForm" target="_blank">
<input type="hidden" id="_merchantCode" name="merchantCode" value="${merchantCode}"/>
<input type="hidden" id="_outOrderId" name="outOrderId" value="${outOrderId}"/>
</form>执行的js脚本:
$.ajax({
type : 'post',
url : "<%=path%>/pay/pay.do",
data : {
payChannel:payChannel,
bankCode: bankCode,
merchantCode: merchantCode,
outOrderId: outOrderId
},
cache : false,
success : function(data) {
if(data.success)
{
$("#rtbForm").attr("src",data.message);
$("#rtbForm").submit();
$("#turnBank").modal("show");
}else
{
if("页面已失效"==data.message)
{
error_alert("页面已失效,请刷新或返回上一页");
}else{
error_alert(data.message);
}
}
},
error : function(){
error_alert("网络异常,请重新支付");
}
});
当ajax执行成功,我提交“rtbForm"表单的时候,新标签页面被浏览器拦截了。测试了各种内核的浏览器也是一样的。后来在网上搜了半天找到了一种方法,把ajax提交改为同步的,就是加async=false;代码如下:
$.ajax({
type : 'post',
url : "<%=path%>/pay/pay.do",
data : {
payChannel:payChannel,
bankCode: bankCode,
merchantCode: merchantCode,
outOrderId: outOrderId
},
cache : false,
async:false,//同步
success : function(data) {
if(data.success)
{
$("#rtbForm").attr("src",data.message);
$("#rtbForm").submit();
$("#turnBank").modal("show");
}else
{
if("页面已失效"==data.message)
{
error_alert("页面已失效,请刷新或返回上一页");
}else{
error_alert(data.message);
}
}
},
error : function(){
error_alert("网络异常,请重新支付");
}
});
这种方法解决了未加证书的http请求在各种浏览器中的拦截问题。但是对于https请求,在chrome浏览器及以chrome为内核的浏览器却还是有这个问题。
后来自己尝试了在提交ajax请求之前,我先用window.open打开一个新标签,然后再我异步请求成功后改变标签地址这种方法。代码如下:
var newWin = window.open("<%=path%>/pay/wait.do", "_blank");
$.ajax({
type : 'post',
url : "<%=path%>/pay/onpay.do",
data : {
payChannel:payChannel,
bankOrgCode: bankOrgCode,
merchantCode: merchantCode,
outOrderId: outOrderId
},
cache : false,
success : function(data) {
if(data.success)
{
newWin.location.href = "<%=path%>/"+data.message+"?merchantCode=${merchantCode}&outOrderId=${outOrderId}";
$("#turnBank").modal("show");
}else
{
if("页面已失效"==data.message)
{
error_alert("页面已失效,请刷新或返回上一页");
}else{
error_alert(data.message);
}
newWin.close();//关闭新标签
}
},
error : function(){
error_alert("网络异常,请重新支付");
newWin.close();//关闭新标签
}
});
}
经过测试,完美解决了问题。。。。以后大家遇到这个问题可以尝试一下,这上面的方法
提交的表单:
<form action="" method="post" id="rtbForm" target="_blank">
<input type="hidden" id="_merchantCode" name="merchantCode" value="${merchantCode}"/>
<input type="hidden" id="_outOrderId" name="outOrderId" value="${outOrderId}"/>
</form>执行的js脚本:
$.ajax({
type : 'post',
url : "<%=path%>/pay/pay.do",
data : {
payChannel:payChannel,
bankCode: bankCode,
merchantCode: merchantCode,
outOrderId: outOrderId
},
cache : false,
success : function(data) {
if(data.success)
{
$("#rtbForm").attr("src",data.message);
$("#rtbForm").submit();
$("#turnBank").modal("show");
}else
{
if("页面已失效"==data.message)
{
error_alert("页面已失效,请刷新或返回上一页");
}else{
error_alert(data.message);
}
}
},
error : function(){
error_alert("网络异常,请重新支付");
}
});
当ajax执行成功,我提交“rtbForm"表单的时候,新标签页面被浏览器拦截了。测试了各种内核的浏览器也是一样的。后来在网上搜了半天找到了一种方法,把ajax提交改为同步的,就是加async=false;代码如下:
$.ajax({
type : 'post',
url : "<%=path%>/pay/pay.do",
data : {
payChannel:payChannel,
bankCode: bankCode,
merchantCode: merchantCode,
outOrderId: outOrderId
},
cache : false,
async:false,//同步
success : function(data) {
if(data.success)
{
$("#rtbForm").attr("src",data.message);
$("#rtbForm").submit();
$("#turnBank").modal("show");
}else
{
if("页面已失效"==data.message)
{
error_alert("页面已失效,请刷新或返回上一页");
}else{
error_alert(data.message);
}
}
},
error : function(){
error_alert("网络异常,请重新支付");
}
});
这种方法解决了未加证书的http请求在各种浏览器中的拦截问题。但是对于https请求,在chrome浏览器及以chrome为内核的浏览器却还是有这个问题。
后来自己尝试了在提交ajax请求之前,我先用window.open打开一个新标签,然后再我异步请求成功后改变标签地址这种方法。代码如下:
var newWin = window.open("<%=path%>/pay/wait.do", "_blank");
$.ajax({
type : 'post',
url : "<%=path%>/pay/onpay.do",
data : {
payChannel:payChannel,
bankOrgCode: bankOrgCode,
merchantCode: merchantCode,
outOrderId: outOrderId
},
cache : false,
success : function(data) {
if(data.success)
{
newWin.location.href = "<%=path%>/"+data.message+"?merchantCode=${merchantCode}&outOrderId=${outOrderId}";
$("#turnBank").modal("show");
}else
{
if("页面已失效"==data.message)
{
error_alert("页面已失效,请刷新或返回上一页");
}else{
error_alert(data.message);
}
newWin.close();//关闭新标签
}
},
error : function(){
error_alert("网络异常,请重新支付");
newWin.close();//关闭新标签
}
});
}
经过测试,完美解决了问题。。。。以后大家遇到这个问题可以尝试一下,这上面的方法
相关文章推荐
- 大众点评2015笔试题(答案)
- 安卓中的几种菜单
- tp-link设置为中继模式
- Hibernate之锁机制
- IOS学习笔记1
- 谈Objective-C Block的实现
- 安卓学习之路之菜单Menu
- NOIP2014 联合权值
- 博客园kubrick主题
- 2016网易游戏 游戏研发岗 在线笔试解题报告
- CentOS7安装JDK
- poj 2420 模拟退火
- ubuntu14.04安装mysql
- 关于HTML的FORM上传文件问题
- 【转】专家:制造业将大批死亡 都怪马云
- NOIP2014 生活大爆炸版石头剪刀布
- 自定义 View的常用方法:
- Linux (Ubuntu/deepin等)终端命令安装Lamp
- DOS命令中的For
- sqlplus与shell互相传值的几种情况