是什么导致此页面上的完整请求？答案

【问题标题】：What causes a full request on this page?是什么导致此页面上的完整请求？
【发布时间】：2011-10-24 23:55:01
【问题描述】：

考虑以下 jsf 页面：

<h:body>
    <h:form id="SessionStartDialog">
        <table>
            <tr>
                <td class="label">
                    <h:outputLabel
                        value="Enter your username:" 
                        for="UsernameField"/>
                </td>
                <td class="input">
                    <h:inputText 
                        id="UsernameField"
                        value="#{login.username}"
                        validator="#{login.validateUsername}"
                        tabindex="1">
                        <f:ajax render="SelectWorkingSetListbox
                                StartSessionButton UsernameMessage" />
                    </h:inputText>
                    <h:message 
                        id="UsernameMessage"
                        for="UsernameField" />
                </td>
            </tr>
            <tr>
                <td class="label">
                    <h:outputLabel
                        value="Choose a working-set:" 
                        for="SelectWorkingSetListbox"/>
                </td>
                <td class="input">
                    <h:selectOneMenu
                        id="SelectWorkingSetListbox"
                        tabindex="2"
                        disabled="#{!login.showWorkingSets}"
                        value="#{login.selectedWorkingSetName}">
                        <f:selectItems 
                            value="#{login.workingSetNames}"/>
                        <f:ajax />
                    </h:selectOneMenu>
                </td>
            </tr>
        </table>
        <h:commandButton 
            id="StartSessionButton"
            styleClass="StartSessionButton"
            disabled="#{!login.showWorkingSets}"
            value="Start Session" 
            tabindex="3"
            action="#{login.startSession}" >
            <f:ajax execute="@form"/>
        </h:commandButton>
    </h:form>
</h:body>

其中的某些内容导致 Safari 报告错误，即 ajax 和完整请求正在混合。我不明白为什么，因为所有导致请求的组件都包含<f:ajax>-tags。这里有什么问题？

更新：

我创建了一个触发此错误的最小示例：

<h:body>
    <h:form>
        <f:ajax render="TextField">
            <h:inputText value="#{theBean.text}" />                
        </f:ajax>
        <h:outputText id="TextField" value="#{theBean.text}" />
    </h:form>
</h:body>

theBean 是一个简单的视图范围 bean，text 是 String 类型的属性。出于某种原因，这会在 Safari 5.1 中触发以下消息：

httpError：Http 传输返回 0 状态代码。这是通常是混合 ajax 和完整请求的结果。这通常是出于性能和数据完整性的原因，这是不受欢迎的。

更新 2 原因似乎是在input 字段中点击enter 总是会触发完整的表单提交。我不知道如何防止这种情况。如第一个示例所示，我希望用户输入用户名，然后启用表单的其他组件（仅当用户名已知时）。我将如何正确实现这一点？

【问题讨论】：

完整回发发生在哪个组件的事件上？在按钮单击或其他组件上？
@Nikhil：这是我的问题。我不知道。当我在 h:inputText-component 中输入内容时，我会收到消息。
它只发生在 Safari 中吗？其他浏览器呢？
@Zenzen：Firefox 产生相同的消息。我目前没有其他浏览器可供测试。

标签： ajax jsf-2 glassfish-3

【解决方案1】：

问题的原因是，在没有<h:commandButton> 的情况下（在第一个示例中它最初被禁用，在第二个示例中，没有），按回车将触发整个表单的提交，导致问题中显示的错误。

目前的解决方案是始终启用<h:commandButton>。由于启用了<f:ajax>，这将阻止完整提交。

P.S.：我发布这个答案是为了向其他人展示一个可能的解决方案。我仍然想知道是否有更好的解决方案（不需要存在<h:commandButton>）。

【讨论】：

【解决方案2】：

我会捕获<form> 上的Enter 键，然后在按下此键的<input> 元素上触发onchange。

<h:form onkeydown="enterToChange(event)">
    ...
</h:form>

与

function enterToChange(event) {
  if (event.keyCode == 13 && event.target.tagName != 'textarea') {
    event.stopPropagation(); // Don't bubble up.
    event.preventDefault();  // Prevent default behaviour (submitting the form).
    event.target.onchange(); // Trigger onchange where key was actually pressed.
  }
}

请注意，这会忽略 textareas 上的 enter 键，您当然希望保留预期的行为（插入新行）。

如有必要，您可以添加额外的检查以查看提交按钮是否不是 disabled，如果是这种情况，则让事件消失。

【讨论】：