Question

对于像这样的简单html页面：

<form action="success.html" >

        <input type="text" value="SomeValue" onchange="this.form.submit()"/>
        <input type="submit" value="Submit"/>

</form>

值的任何更改都会导致表单的 自动提交 导航到success.html

考虑JSF 2.x中的以下片段：

<h:form >

        <h:panelGrid columns="3">

            <h:outputLabel value="Name: " />
            <h:inputText id="inputname" binding="#{zipAutoFill.inputName}" 
                                        required="true"/>
            <h:message for="inputname"/>

            <h:outputLabel value="Zip Code: " />
            <h:inputText id="inputzip" 
                         binding="#{zipAutoFill.inputZip}" 
                valueChangeListener="#{zipAutoFill.zipAutoFillListener}"
                                        onchange="this.form.submit()"/>
                                        <h:message for="inputzip"/>

            <h:outputLabel value="City: " />
            <h:inputText id="inputcity" binding="#{zipAutoFill.inputCity}" />
            <h:message for="inputcity"/>

            <h:outputLabel value="State: " />
            <h:inputText id="inputstate" binding="#{zipAutoFill.inputState}" />
            <h:message for="inputstate"/>

            <h:commandButton  id="submitbutton" value="Submit" action="page02"/>

        </h:panelGrid>


</h:form>

根据用户填写的邮政编码（因此导致值更改），将相应地填充字段city和state。

但是，自动提交后，它不会导航到page02.xhtml。我错过了什么？

Answer 1

在您使用简单HTML的第一个示例中，提交后导航背后的原因与action属性相关，该属性使用您要将数据发送给它的页面名称指定{{ 1}}，因此您的<form action="success.html" >会将表单数据发送到this.form.submit()并导航到它。

要了解在使用JSF自动提交的情况下未显示第二页的原因，您可以查看生成的HTML。在您的JSF示例中，并且因为您使用的是<h:commandButton>，所生成的HTML将如下所示（为简单起见，我假设您的表单ID为success.html，而当前页面为form）：

page01.xhtml

因此，您可以注意到生成的HTML的<form id="form" name="form" method="post" action="/yourcontextpath/page01.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="form" value="form" /> ..... <input type="submit" name="form:submitbutton" value="Submit" /> </form>属性设置为当前页面action，这意味着对JavaScript action="/yourcontextpath/page01.xhtml"的任何调用都会发送表单数据到我们案例submit()的当前页面（与第一个示例不同，表单数据已发送到另一个页面page01.xhtml）。

简而言之，您将不会有相同的行为，因为HTML代码不相同（比较第一个示例和生成的HTML），主要区别与表单的action属性中指定的页面有关。

NB：如果您使用success.html提交，结果会有所不同，因为JSF会使用commandButton的action属性的结果导航到指定的<h:commandButton>在page02.xhtml

另见：

Difference between h:button and h:commandButton

valueChangeListener，使用JSF onchange和自动提交表单

1 个答案:

另见：