ajax - h :outputLink with f:ajax - method called, 但未显示链接

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"

更新:(我有不到 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 和一个正常的给定链接。完成得越早的人获胜。您希望同步发送 HTTP 请求。首先将 ajax 发送到服务器，当它返回时，然后将正常发送到给定链接。

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

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

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

像这样

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

(HTML 元素 ID 不能以数字开头!因此有 ext_ 前缀，您当然可以随意更改它。)

与

$(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();
    });
});

和

@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);
    }

}