在新选项卡中打开 ajax 链接答案

【问题标题】：Open ajax links in new tab在新选项卡中打开 ajax 链接
【发布时间】：2015-08-04 21:18:28
【问题描述】：

我正在构建一个面向 ajax 的网站，我的所有链接都是这样工作的：

<div class="link">press me </div>

<div id="contents" ></div>
<script>
    $('div[class="link"]').click(function() {
        $.ajax({                                      
            url: 'contents/get_products.php',
            type: "GET",        
            data: 
            dataType: 'json',               
            success: 
                function(data){ 
                  $.each(data, function(i){
                      $('#contents').append('<div class="cat_list_item">something</div>'); 
                  });
            }
        });
    });
</script>

如何使这些链接在新选项卡中打开（在中键单击或右键单击“在新选项卡中打开链接”）。

我知道浏览器只是打开原始页面（url）而没有从 Ajax 调用中检索到的数据，但是我怎样才能让它在新选项卡中加载数据。我一直在互联网上四处寻找，到目前为止我还没有找到解决方案。

【问题讨论】：

标签： jquery ajax

【解决方案1】：

不，至少使用您的方法几乎不可能。如果您想使用浏览器本机提供的新标签功能，您不能使用 divs 和附加到它们的 Javascript 处理程序来处理您的链接。

你可以做什么：使用window.open 和_blank 作为目标，但是你会遇到弹出窗口阻止程序的问题，这可能不是你想要的。

您还可以使用<a class="link" href="my-ajax-view/?some=parameters">press me</a> 并编写一个页面来显示您正在寻找的内容（这对我来说似乎是最好的解决方案，因为这样您还可以为 5% 的关闭 Javascript 的用户提供功能）。您仍然可以在单击该链接时使用 JQuery 进行一些花哨的 AJAX 加载，但如果有人在新选项卡中打开该链接，您将重定向到收集信息的页面。您的新点击处理程序将如下所示：

$('a.link').click(function(event) {
    event.preventDefault();
    // Your ajax request here
}

【讨论】：

【解决方案2】：

这违反了 AJAX 的概念，AJAX 旨在通过发送对单个数据的请求来摆脱 each user action required that the page be re-loaded from the server，这将导致当前页面更新。请求数据以创建具有此概念之外的中断的新选项卡，这需要您再次请求才能实际显示该选项卡。

任意选择：

要使用 AJAX 在当前选项卡中显示的数据，...
或者根本不做 AJAX，只打开一个请求数据的新选项卡。

不要将这两者混为一谈，因为这根本没有意义。

【讨论】：

【解决方案3】：

您始终可以使用您的 php 代码动态创建一个 html 页面，并将地址返回给它，并在 javascript 的 window.open 命令中提到 target="_blank"。

或者，是否可以使用 jQuery UI 创建一个包含结果数据的新选项卡？

【讨论】：

【解决方案4】：

我在同样的问题上苦苦挣扎，我找到了非常简单的解决方案。它基本上只是用这样的简单条件检查 AJAX 代码：

if (event.which !== 2) {
  // ajax code
}

这样你只有在你不点击鼠标中键时才调用 AJAX，如果你这样做，它仍然表现得像普通链接，所以它会在新标签中打开页面。

【讨论】：