JS 点击元素发ajax请求 打开一个新窗口

JS 点击元素发ajax请求 打开一个新窗口

        经常在项目中会碰到这样的需求，点击某个元素后，需要发ajax请求，请求成功以后，开发需要把链接传给前端(或者说请求成功后打开新窗口)，前端需要通过新窗口打开这个链接，其实这样的原理大家可能觉得非常简单，想起来非常简单，用JS中的window.open就可以实现打开新的窗口，或者点击div元素，发ajax请求成功后，动态把链接传给a标签，然后再触发a标签事件，也可以实现，对吧？曾几何时，我也曾经把这样的问题发到JS群里面去，很多JS社区朋友说 龙恩 这么简单的问题你都实现不了？你怎么做前端的？大家都觉得非常简单，最后讨论了一个多小时，都没有结果！很多人提议用window.open，还有人提用location.href ="" 然后设置target="_blank"等，还有提出用form表单去提交，但是不管他们用任何方式，效果都一样，在主流的浏览器 firefox and chrome 结果是：被浏览器拦截了！(IE我不管)，正常的情况下 点击一个元素 用window.open打开一个新的网页 都没有问题，并且不会被浏览器拦截！这个大家都知道，但是为什么需要多一步发ajax请求 且被浏览器拦截了呢？为了解决这么一个问题，肯定要做做demo，我是这样这样做的：

<div class = "testA" style="cursor:pointer;">点击我弹出一个新窗口</div>

JS如下：

$('.testA').unbind('click').bind('click',function(){
  $.ajax({						  url:'http://localhost/demo/windowopen/test.php',
    'type':'POST',
    dataType:'json',
    success: function(data){
      if(data && data.success) {
               window.open('http://www.baidu.com');
          }
        }
      });
    });

URL 我可以不管 反正就是一个请求 且是同域的，这是ajax异步的请求，为了解决这个问题，我们可以让他们同步请求 就可以实现，firefox and chrome也不会被拦截了！

JS代码如下：

$('.testA').unbind('click').bind('click',function(){
      $.ajax({
        url:'http://localhost/demo/windowopen/test.php',
        'type':'POST',
        async:false,
        dataType:'json',
        success: function(data){
          if(data && data.success) {
            window.open('http://www.baidu.com');
          }
        }
      });
    });

设置同步的请求就可以实现了， (async:false ) 。大家都可以测试下！

解决 ajax请求成功后，打开新窗口，并且不被浏览器拦截。

1、一定要把 window 放在外面

2、一定要用同步请求

[javascript]  view plain copy

1. var result="";  
2.    
3. jQuery.ajax({  
4.       "type":"post",  
5.       "url":"http://www.baidu.com",   
6.       "async":"false",  
7.       "success":function(rel){  
8.            if(rel.isSuccess){   
9.   result=rel.url;  
10.                 //window.open(rel.url,"_blank");  
11.     }  
12.       }  
13. });  
14.    
15. if(result.length>0){  
16.       window.open(result,"_blank");  
17. }