Javascript 如何将隐藏的变量从html5发送到jsf（XHTML）_Javascript_Html_Post_Jsf 2_Hidden

Javascript 如何将隐藏的变量从html5发送到jsf（XHTML）

javascript html post jsf-2

Javascript 如何将隐藏的变量从html5发送到jsf（XHTML）,javascript,html,post,jsf-2,hidden,Javascript,Html,Post,Jsf 2,Hidden,我正在为学校做一个项目。该项目的主题是T恤设计。我正在使用jsf和primefaces。在一个div中，完成了一个设计，然后我想将内容作为图像文件保存在div中。这是在html5画布中完成的。设计保存为base64。我有个问题。我想将一个隐藏的（dataURL，base64）变量从html5发送到xxx.xhtml。隐藏包括base64数据。我该怎么办我做下面的事。但它不起作用。我做错了什么在my-jquery.js中： $(document).ready( function

我正在为学校做一个项目。该项目的主题是T恤设计。我正在使用jsf和primefaces。在一个div中，完成了一个设计，然后我想将内容作为图像文件保存在div中。这是在html5画布中完成的。设计保存为base64。我有个问题。我想将一个隐藏的（dataURL，base64）变量从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>

JSF在webserver中运行，并生成HTML，发送给webbrowser。JS在webbrowser中运行，只能访问HTMLDOM树。它对JSF源代码一无所知

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

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

这将产生

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

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

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

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