h:outputLink 与 f:ajax - 调用方法，但未显示链接

Question

这不起作用

<h:form style="display: inline;">
    <h:outputLink value="#{title.link}" >
        #{msg['g.readMore']}
        <f:ajax event="click" immediate="true" listener="#{titlesBean.titleClicked(title.id)}" />
    </h:outputLink>
</h:form>

我想要它做的是单击时调用 #{titlesBean.titleClicked(title.id)} 然后转到链接。该方法被调用，但不会转到链接。还有其他几种方法可以做到这一点（使用 commandLink 然后重定向，但我想知道为什么这不起作用）。

这是方法本身：

public String titleClicked(long titleId) {
    this.titlesManager.addXtoRating(titleId, 1);
    return null;
}

注意：这只是一个旁注，但我无意中发现这有效：

<script type="text/javascript">
    $('.share').popupWindow({centerBrowser:1,height:380,width:550});
</script>

<h:form style="display: inline;">
    <h:outputLink styleClass="share" value="http://www.facebook.com/sharer.php...">
        <img src="images/facebook-icon.jpg" />
        <f:ajax event="click" immediate="true" listener="#{titlesBean.titleLiked(title.id)}" />
    </h:outputLink>
 </h:form>

查看 styleClass="share"

Update< /strong>：（我的代表数不到 100，所以我在 8 小时内无法回答自己的问题，这就是如何微妙地表达 - 愚蠢）。 我等了一会儿，但没有人回答。

所以这是我的破解解决方案（我一点也不喜欢它，但它有效）：

<h:form style="display: inline;">
    <h:outputLink target="_blank" styleClass="click8" value="#{title.link}" >
        #{title.heading}
        <f:ajax event="click" immediate="true" listener="#{titlesBean.titleLiked(title.id)}" />
    </h:outputLink>
</h:form>

这是重要的部分：

<h:head>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.click8').click(function (event){
                         var url = $(this).attr("href");
                         window.open(url, "_blank");
                         event.preventDefault();
            });
        });
    </script>
</h:head>

注意：这必须位于标题中，否则我有一个重大错误，链接打开了一千个视窗。

Answer 1

它不起作用，因为这里存在竞争条件。在同一个窗口中同时发送两个 HTTP 请求。一种 ajax 连接到服务器，另一种 ajax 连接到给定的链接。较早完成的获胜。您想要同步发送 HTTP 请求。首先将 ajax 发送到服务器，当它返回时，然后将普通的 ajax 发送到给定的链接。

至于你的 hacky 解决方案，它之所以有效，是因为它使用 JavaScript 在新窗口而不是当前窗口中打开 URL，然后阻止链接的默认操作，因此正常响应只是到达完全独立的窗口，而 ajax 响应仍然到达在初始窗口中。因此，在初始窗口中不再存在两个 HTTP 请求的竞争条件。

至于最终的解决方案，这对于标准的 JSF 2.0 组件集是不可能的。使用 然后进行重定向确实是可行的，但是这种方式的链接无法被搜索机器人抓取，并且它会有效地触发 POST 请求，这在我看来比您的新窗口更糟糕解决方案。

如果您确实想在当前窗口中打开链接，从而将目标 URL 保留在链接的 href 中，那么我建议创建一个简单的 servlet，它执行链接跟踪和重定向工作，并让 jQuery 在 onclick 期间操作链接目标。

像这样的东西

<a rel="ext" id="ext_#{title.id}" href="#{title.link}">read more</a>

您当然可以以任何您想要的方式更改它。）

与

$(function() {
    jQuery('a[rel=ext]').click(function(e) {
        var link = jQuery(this);
        var url = 'track'
            + '?id=' + encodeURIComponent(link.attr('id')) 
            + '&url=' + encodeURIComponent(link.attr('href'));

        if (link.attr('target') == '_blank') {
            window.open(url);
        } else {
            window.location = url;
        }

        e.preventDefault();
    });
});

（HTML元素ID可能不以数字开头！因此ext_前缀，

@WebServlet(urlPatterns={"/track"})
public class TrackServlet extends HttpServlet {

    @EJB
    private TrackService trackService;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");
        String url = request.getParameter("url");

        if (id == null || url == null) {
            response.sendError(HttpServletResponse.SC_BAD_REQUEST);
            return;
        }

        trackService.track(id.replaceAll("\\D+", "")); // Strips non-digits.
        response.sendRedirect(url);
    }

}