如何将 JavaScript 变量作为参数传递给 JSF 操作方法？

Posted 2023-02-22

【中文标题】如何将 JavaScript 变量作为参数传递给 JSF 操作方法？

【英文标题】：How to pass JavaScript variables as parameters to JSF action method?

【发布时间】：2015-04-19 21:47:23

【问题描述】：

我正在 javascript 中准备一些变量（在我的具体情况下，我想获取 GPS 位置）：

function getVars() 
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;

我想通过以下命令按钮将它们发送到我的托管 bean：

<h:commandButton value="submit" onclick="getVars()" action="#bean.submit(x,y)" />

public void submit(int x, int y) 
    // ...

如何将 x 和 y 变量从 JavaScript 发送到 JSF 托管 bean 操作方法？

【问题讨论】：

是否要将全球定位系统 (GPS) 坐标、经度和纬度值从 JavaScript 传递到相应的支持 bean？ See.

@Tiny Thx 例如。这是一篇不错的文章。但我有一个问题是 URL，URL 是否等于 Xhtml 路径？

我完全错过了评论。

【参考方案1】：

让JS将它们设置为相同形式的隐藏输入值。

<h:form id="formId">
    <h:inputHidden id="x" value="#bean.x" />
    <h:inputHidden id="y" value="#bean.y" />
    <h:commandButton value="submit" onclick="getVars()" action="#bean.submit" />
</h:form>

function getVars() 
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;

    document.getElementById("formId:x").value = x;
    document.getElementById("formId:y").value = y;

命令按钮操作方法可以像通常的方式一样将它们作为 bean 属性访问。

private int x;
private int y;

public void submit() 
    System.out.println("x: " + x);
    System.out.println("y: " + y);
    // ...


// Getters+setters.

另一种方法是使用OmniFaces <o:commandScript> 或PrimeFaces <p:remoteCommand> 而不是<h:commandButton>。另见 a.o. How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

【讨论】：

如果你想从 JS 本身调用一个支持 bean 的方法为 #bean.foo() 怎么办？你能在括号内放一个 JS var 吗？

见最后一段。

如果使用 PrimeFaces，我认为最好使用 javascript API PrimeFaces.widgets['widget_myInputTextId'] 来操作对象。如这里所解释的：blog.hatemalimam.com/intro-to-primefaces-widgetvar

【参考方案2】：

如果您使用PrimeFaces，您可以使用链接到托管bean的隐藏输入字段，并且您可以使用javascript初始化其值，对于PrimeFaces，PF函数可用于访问链接到隐藏输入的小部件变量，方式如下：

<script type="text/javascript">
function getVars() 
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;
    PF('wvx').jq.val( lat1 );
    PF('wvy').jq.val( lng1 );

</script>

<p:inputText type="hidden" widgetVar="wvx" value="#bean.x" />
<p:inputText type="hidden" widgetVar="wvy" value="#bean.y" />

【参考方案3】：

<h:form id="formId">
<h:inputHidden id="x" value="#bean.x" />
<h:inputHidden id="y" value="#bean.y" />
<h:commandButton value="submit" onclick="getVars()" action="#bean.submit" />

 <script>
        function getVars() 

            var x; 
            var yt;

            x=#bean.x;
            y=#bean.y;
        
    </script>

【讨论】：

这不是一个解决方案... javascript 会评估渲染时间，它不会是在调用 'getVars() 时发生的分配（单击按钮）... 错误'回答'......（你真的尝试过吗？）

其实，它对我来说是正确的，我以这种方式使用它没有问题。只要 javascript 在同一个 xhtml 内。

不，它不能工作......对不起。 #bean.x 服务器端永远不会通过这段 javascript 分配 x 的值（查看源客户端显示的内容）。抱歉完全错了（其他人同意考虑反对票）。你能说服我的唯一方法是制作一个真正的minimal reproducible example。如果它对你有用，那么可能还有其他不可见的东西可以做实际的工作。