javascript代码实例教程-JS 点击元素发ajax请求 打开一个新窗口

发布时间:2019-02-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS 点击元素发ajax请求 打开一个新窗口脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 JS 点击元素发ajax请求 打开一个新窗口

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

 

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

JS如下:

 

复制代码

$(&#39;.testA').unbind('click').bind('click',function(){

    $.ajax({                          url:'https://localhost/demo/windowopen/test.php',

        'type':'POST',

        dataType:'json',

        success: function(data){

            if(data && data.success) {

                           window.open('https://www.baidu.COM');

                    }

                }

            });

        });

复制代码

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

 

JS代码如下:

 

复制代码

$('.testA').unbind('click').bind('click',function(){

            $.ajax({

                url:'https://localhost/demo/windowopen/test.php',

                'type':'POST',

                async:false,

                dataType:'json',

                success: function(data){

                    if(data &amp;& data.success) {

                        window.open('https://www.baidu.com');

                    }

                }

            });

        });

复制代码

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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS 点击元素发ajax请求 打开一个新窗口全部内容,希望文章能够帮你解决javascript代码实例教程-JS 点击元素发ajax请求 打开一个新窗口所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。