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) 。大家都可以測試下！