如何将隐藏的 var 从 html5 发送到 jsf (xhtml)答案

【问题标题】：how to send a hidden var from html5 to jsf (xhmtl)如何将隐藏的 var 从 html5 发送到 jsf (xhtml)
【发布时间】：2012-12-23 08:13:47
【问题描述】：

我正在为学校做一个项目。项目主题是 T 恤设计。我正在使用 jsf 和 primefaces。在一个div中，设计完成了，然后我想将div中的内容保存为图像文件。这是在 html5 画布中完成的。设计保存为 base64。我有个问题。我想将隐藏的（dataURL，base64）var 从 html5 发送到 xxx.xhtml。隐藏包括 base64 数据。我该怎么办？

我做以下方面。但它不起作用。我做错了什么？

在 my-jquery.js 中：

    $(document).ready(
    function() {
        $("#sendToServer").click(
                function() {
                    var canvas = document.getElementById("design");
                    var dataUrl = canvas.toDataURL("image/png;base64");

                    var hidden = document.getElementById("dataURL");
                    hidden.value = dataURL;
                }); 
});

在 design.html 中：

 <body>
<canvas id="design" width="320" height="260"></canvas>
<form id="sendForm" method="post" action="/Tshirt/demo.xhtml">
    <input type="hidden" id="dataURL"/> 
    <input type="submit"  id="sendToServer" value="Send To Server">
</form>
 </body>

在 xxx.xhtml 中：

<h:form>
       <h:inputHidden id="dataURL" value="#{imageBean.dataURL}" />
       <h:commandButton value="Submit" action="#{imageBean.submit}"/>
     </h:form>

【问题讨论】：

点击提交后，bean中的dataURL为null

标签： javascript html post jsf-2 hidden

【解决方案1】：

JSF 在网络服务器中运行并生成发送到网络浏览器的 HTML。 JS 在 webbrowser 中运行，只能访问 HTML DOM 树。它对 JSF 源代码一无所知。

在为 JSF Web 应用程序编写 JS 代码时，您无法从头到尾判断 JSF 究竟会生成什么 HTML 代码，那么您应该在 webbrowser 中打开 JSF 页面并右键单击并查看源代码时间>。你会看到这样的东西

<form id="j_idt42" ...>
    <input type="hidden" id="j_idt42:dataURL" ... />

这就解释了为什么document.getElementById("dataURL") 没有给你任何东西。如果你关注浏览器的 webdeveloper 工具集中的 JS 控制台（在 Chrome/IE9/Firebug 中按 F12），那么你应该已经注意到了。

您基本上需要改为document.getElementById("j_idt42:dataURL")，但您应该给JSF NamingContainer 组件（例如<h:form>）一个固定的ID，这样JSF 就不会自动生成一个然后您就不需要了每次从视图中添加/删除组件时更改脚本，从而导致自动生成的 ID 发生更改。例如

<h:form id="form">
    <h:inputHidden id="dataURL" ... />

这会生成

<form id="form" ...>
    <input type="hidden" id="form:dataURL" ... />

然后你就可以得到它了

var hidden = document.getElementById("form:dataURL");

【讨论】：