gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:32:58 25 4
gpt4 key购买 nike

我需要在 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 native 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. 使用“隐藏形式”技巧(实际上,“黑客”是给丑陋一个更好的措辞)。

     <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/35865594/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com