表单提交与 ajax 执行 =“@form”答案

【问题标题】：Form submit vs ajax execute="@form"表单提交与 ajax 执行 =“@form”
【发布时间】：2014-02-23 16:47:15
【问题描述】：

我正在使用 JSF2.1。

下面代码中execute="@form" 和this.submit() 有什么区别？

<f:ajax execute="@form" render="@form"/>

和：

<h:form onkeypress="if (event.keyCode == 13) this.submit();">

前者似乎提交值并重新呈现表单，而后者导致页面刷新。当在表单中按下回车键时，有什么方法可以使用 ajax？我正在尝试检测在inputText 框中按下的回车键。我尝试过这样的事情：

<h:inputText value="#{a.name}" >
  <f:ajax execute="@this" />
</h:inputText>

但这只会导致在您单击其他内容时提交值（在 valueChange 之后）。

【问题讨论】：

标签： ajax jsf jsf-2

【解决方案1】：

为了回答您的问题的标题，它们之间的区别是表单提交发送整个表单并重新加载视图，而 ajax 表单执行也提交整个表单，但是使用ajax 请求，可用于在响应发生之前仅呈现视图的特定部分。

关于你的问题内容，Enter键提交的表单在主流浏览器中实现单输入表单。无需对 onkeypress 事件进行 javascript 处理，因为浏览器会检测到该事件并默认发送表单。

所以下一个代码段在服务器端具有相同的结果，或者按下 Send 按钮或 Enter 键：value 属性正在设置。请注意，在第二种形式中，<h:inputText /> 具有 ajax 行为，当按下 Enter 键时，h:outputText 值也会刷新（即使没有指定 render 属性），即因为完整的提交请求优先于 ajax 请求并且整个页面被重新加载。只有谷歌浏览器似乎能说明这个冲突：httpError:The Http Transport 返回了 0 状态码。这通常是混合 ajax 和完整请求的结果。

完整请求：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}" />
        <h:commandButton value="Send" />
    </h:form>
</body>
</html>

Ajax 请求：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}">
            <f:ajax />
        </h:inputText>
        <h:outputText value="Echo: #{bean.value}" />
    </h:form>
</body>
</html>

当表单有多个输入字段时，如果没有任何提交按钮，您可以使用这样的 javascript 验证来发送表单，使用完整的提交请求。如果有，那是不必要的。

最后，如果要在击键时执行ajax请求并更新模型值，请使用onkeypress属性：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
    <h:form>
        <h:inputText value="#{bean.value}"
            onkeypress="if (event.keyCode == 13) {onchange(); return false; }">
            <f:ajax render="echo" />
        </h:inputText>
        <h:inputText value="#{bean.value2}" />
        <h:outputText id="echo" value="Echo: #{bean.value}" />
    </h:form>
</body>
</html>

提醒建议使用提交按钮来处理简单的可访问性问题。

另请参阅：

【讨论】：