在IE、fixfox、chrome等浏览器中ajax提交成功后,打开新标签页面被浏览器拦截问题

31 篇文章 0 订阅
23 篇文章 0 订阅

最近做了一个项目,在项目中涉及到先向后端发送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();//关闭新标签
				}
			});
		}

经过测试,完美解决了问题。。。。以后大家遇到这个问题可以尝试一下,这上面的方法

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值