javascript - 如何使用 native JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean?

标签 javascript ajax jsf primefaces facelets

我需要在 HTML DOM load 事件期间使用 ajax 执行 JSF 托管 bean 操作方法,类似于 jQuery 的 $(document).ready(function() { $.ajax(. ..) })。我只能在这个项目中使用 JSF 生成的 JavaScript。有没有办法在原生 JSF 中做到这一点?我可以使用哪个事件或可以使用哪个 JSF ajax 函数?

我正在使用 JSF 2.0、Facelets 和 PrimeFaces。

最佳答案

几种方式。

  1. 使用 <h:commandScript> .请注意,这仅在 JSF 2.3 之后可用。

     <h:form>
         <h:commandScript name="commandName" action="#{bean.action}" render=":results" />
     </h:form>
     <h:panelGroup id="results">
         ...
     </h:panelGroup>
    

    您可以在 JS 中调用它,如下所示:

     commandName();
    

    可以按如下方式传递参数:

     commandName({ name1: "value1", name2: "value2" });
    

    得到如下:

     String name1 = externalContext.getRequestParameterMap().get("name1"); // value1
     String name2 = externalContext.getRequestParameterMap().get("name2"); // value2
    

    load 期间调用它事件,设置 autorun="true" .

     <h:commandScript ... autorun="true" />
    

  2. 如果您使用 PrimeFaces,请使用它的 <p:remoteCommand> .

     <h:form>
         <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" />
     </h:form>
     <h:panelGroup id="results">
         ...
     </h:panelGroup>
    

    您可以在 JS 中调用它,如下所示:

     commandName();
    

    然而,这不使用 JSF 原生 jsf.ajax.request() ,而是使用 PrimeFaces 原生 jQuery(您知道,PrimeFaces 是一个基于 jQuery/UI 的 JSF 组件库)。

    可以按如下方式传递参数:

     commandName([{ name: "name1", value: "value1" }, { name: "name2", value: "value2" }]);
    

    得到如下:

     String name1 = externalContext.getRequestParameterMap().get("name1"); // value1
     String name2 = externalContext.getRequestParameterMap().get("name2"); // value2
    

    load 期间调用它事件,设置 autoRun="true" .

     <p:remoteCommand ... autoRun="true" />
    

  3. 如果您使用的是 OmniFaces,请使用其 <o:commandScript> .用法与 <h:commandScript> 完全相同但随后可用于旧的 JSF 2.x 版本。

    只需替换 h:通过 o:在第一个例子中。历史记录:<h:commandScript>完全基于 <o:commandScript> .


  4. 使用“隐藏形式”技巧(实际上,“hack”是丑陋的更好的措辞)。

     <h:form id="form" style="display:none;">
         <h:commandButton id="button" action="#{bean.action}">
             <f:ajax render=":results" />
         </h:commandButton>
     </h:form>
     <h:panelGroup id="results">
         ...
     </h:panelGroup>
    

    您可以在 JS 中调用它,如下所示:

     document.getElementById("form:button").onclick();
    

    注意触发 onclick() 的重要性而不是 click() . onclick()立即调用生成的 onclick函数,而 click()基本上只模拟元素上的“点击” Action ,就好像使用鼠标一样,这在 IE 中不受支持,并且在某些浏览器中还要求元素实际上是可交互的(即 display:none 不能使用)。

    可以通过<h:inputHidden>传递参数与您事先通过 JS 填写的表格相同。这在 How to pass JavaScript variables as parameters to JSF action method? 中得到了证明。

    load 期间调用它事件,考虑将其放入 <h:outputScript target="body"> . target="body"自动放入 <script><body> 结束时,因此 $(document).ready()包装器是不必要的。

     <h:outputScript target="body">
         document.getElementById("form:button").onclick();
     </h:outputScript>
    

  5. 或者,创建自定义 UIComponent延伸UICommand并生成必要的 JSF native jsf.ajax.request()称呼。例如,您可以查看 source code OmniFaces <o:commandScript> .

关于javascript - 如何使用 native JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40968154/

相关文章:

javascript - 如何以编程方式获取网页中图像的渲染尺寸?

javascript - 是否可以基于一个主键获取所有 MySQL 表关联?

Laravel 中使用 Ajax 的 Jquery ui slider

javascript - 当以编程方式更改输入值时,不会执行更改事件

jsf - 已淘汰的Facelets代码仍会调用#{bean.action()}之类的EL表达式,并在#{bean.action}上导致javax.el.PropertyNotFoundException

javascript - React-router 自动将任何路由重定向到 root "/"除了 "/main"

javascript - 使用javascript将动态文本输入div

x 个字符后调用 ajax

php - OctoberCMS Ajax 在前端排序

java - h :commandButton action is just called one time on two calls