Ajax异步打开新页面弹框被拦截，无法将参数值传递到后台

一、Form提交，打开新页面被拦截

手动触发Form提交打开新页面是不会被拦截的，但是如果通过Ajax异步处理回调后再程序自动触发Form提交的话，就会被浏览器当成广告弹框拦截

1、暂时的解决办法：如果必须要在Ajax异步回调之后程序自动触发提交，两个方法

1）可以将Form的method改为get方式，这样的话如果被拦截，只要选择允许弹框就可以打开新页面

2）将target改为_self，在本页面中打开

2、彻底的解决办法

1）之所以浏览器认为打开新窗口不是由用户主动发起的，是因为ajax的异步请求导致，而ajax不仅可以进行异步请求，也可以进行同步请求，然后就把这段代码的ajax请求改为同步，调试通过，如下： 

  1. $.ajax({  
  2.     url:url,  
  3.     data:form.serialize(),  
  4.     dataType: 'json',  
  5.     async:false  
  6. }).done(function(o){  
  7.     if(o.success){  
  8.         if(o.data){  
  9.             window.open('http://www.XXX.com');  
  10.         }else{  
  11.             newwin.close();  
  12.             $(document).trigger('simpleDialog',['#dialog-has-order']);  
  13.         }  
  14.     }else{  
  15.         _onFailure();  
  16.     }  
  17. }).fail(_onFailure);  

        但是这种方法虽然解决了问题，但是也同样失去了我们使用ajax的实衷，而且这种方法在jquery的使用手册里也明确指出，其受到调用的接口的性能影响，如果长时间不响应，势必会锁住浏览器，失去异步响应的优势。
2）后来通过进一步查找，据说淘宝有一种作法，就是在ajax执行之前先打开一个新窗口，这时候是同步的，所以不会有问题，然后在异步调用成功后使用location.href将其指向新的url,如果失败则将该窗口关闭，如下： 

  1. var newwindow=window.open("about:blank");  
  2. window.focus();  
  3. $.ajax({  
  4.     url:form.attr('action'),  
  5.     data:form.serialize(),  
  6.     dataType: 'json',  
  7.     async:false  
  8. }).done(function(o){  
  9.     if(o.success){  
  10.         if(o.data){  
  11.             newwindow.location.href="http://www.XXX.com";  
  12.                         newwindow.focus();  
  13.         }else{  
  14.             newwindow.close();  
  15.         }  
  16.     }else{  
  17.         newwindow.close();  
  18.     }  
  19. }).fail(function(){newwindow.close();});  

        但是这种方法带来一个问题，就是当失败后，会先打开一个窗口，然后再关闭，虽然一闪而过，但是对用户总是一个困扰，相对来说还不如将ajax改成同步，毕竟现在的互联网的访问速度，不至于会将浏览器锁住太长时间。

 

参考文章：http://blog.csdn.net/yanhandle/article/details/8486638

posted @ 2015-12-04 01:04  NewLife365  阅读(608)  评论(0)  编辑  收藏  举报