在新标签中打开ajax链接

I'm building an ajax oriented site and all my links work like this:

我正在构建一个面向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>

How to make these links open in new tab (on middle click or on "open link in new tab" on right click).

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

I know that the browser just opens the original page (url) without the data retrieved from the Ajax call, but how can I make it load the data in the new tab. I've been looking around the Internet and by now I haven't found a solution.

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

4 个解决方案

#1

No, at least using your approach doing that is hardly possible. If you want to use the new tab functionality provided natively by the browser, you cannot use divs with Javascript handlers attached to them for your links.

不，至少使用你的方法做到这一点几乎是不可能的。如果要使用浏览器本机提供的新选项卡功能，则不能将带有Javascript处理程序的div用于链接。

What you could do: use window.open with _blank as target, but you will run into problems with popup blockers, and that is probably not what you want.

你可以做什么：使用带有_blank的window.open作为目标，但是你会遇到弹出窗口拦截器的问题，这可能不是你想要的。

You could also use <a class="link" href="my-ajax-view/?some=parameters">press me</a> and write a page that shows the content you are looking for (what seems like the best solution to me, because then you would also provide functionality for the 5% of users that have Javascript turned off). You can still do some fancy AJAX loading with JQuery on the click of that link, but if someone opens the link in a new tab, you redirect to a page that gathers the information. Your new click handler would then look like this:

您也可以使用按我并撰写一个显示您要查找的内容的页面（看起来最好的内容）我的解决方案，因为那时你也会为5％关闭Javascript的用户提供功能。您仍然可以通过单击该链接来使用JQuery加载一些奇特的AJAX，但如果有人在新选项卡中打开链接，您将重定向到收集信息的页面。您的新点击处理程序将如下所示：

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

#2

This is against the concept of AJAX, which intends to get rid of that each user action required that the page be re-loaded from the server by sending requests for individual data, which would cause the current page to update. Requesting data to create a new tab with breaks outside of this concept, this requires you to make a second request to actually get the tab shown.

这违背了AJAX的概念，它打算消除每个用户操作要求通过发送对单个数据的请求从服务器重新加载页面，这将导致当前页面更新。请求数据创建一个在此概念之外的中断的新选项卡，这要求您发出第二个请求以实际显示选项卡。

Either choose for:

要么选择：

The data to be shown in the current tab using AJAX, ...

使用AJAX在当前选项卡中显示的数据，...
OR do no AJAX at all and just open up a new tab which requests the data.

或者根本没有AJAX，只需打开一个请求数据的新选项卡。

Don't mix those two because it just doesn't make sense at all.

不要混淆这两者，因为它根本没有意义。

#3

You could always dynamically create an html page with your php code and return the address to it and as mentioned target="_blank" it on a window.open command from javascript.

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

Alternatively, would using jQuery UI to create a new tab with the result data do the job?

或者，使用jQuery UI创建一个新的选项卡，结果数据可以完成这项工作吗？

#4

I was struggling with the same issue and I found very simple solution. It's just basically checking the AJAX code with simple condition like this:

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

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

This way you're calling AJAX only when you don't click middle mouse button, if you do it's still behaving like normal link, so it opens up the page in new tab.

这样，只有当您不单击鼠标中键时才调用AJAX，如果这样做仍然像普通链接一样，那么它会在新选项卡中打开页面。

#1