java - 无法使用 javascript 提交()接缝表单

Question

嗨，我有一个接缝表单，我们用它来将附件上传到我们的java代码中。一切都工作正常，直到我们需要显示一个 jquery 对话框来向用户提供一些上传正在进行的视觉反馈。

为此，我们通过 javascript 拦截 onsubmit 事件，打开 jquery 对话框，然后稍后通过 document.forms[...].submit() 提交表单。

一切看起来都在工作，消息出现，一秒钟后我们看到浏览器正在将数据传输到服务器，但接缝不会调用表单的操作。页面只是刷新，没有任何反应。

如果我删除 JavaScript Submit() 并让表单在正常的提交按钮中提交，单击接缝会正常处理服务器上的操作。

我的接缝形式:

<h:form onsubmit="return ClickSuperUtil.submitForm();" enctype="multipart/form-data">
    <s:validateAll>
        <h:panelGrid columns="2">
            <h:outputText rendered="false" value="#{messages['document_type']}:" />
            <h:selectOneMenu rendered="false" value="#{document.documentType}" required="true">
                <f:selectItem itemLabel="#{messages['dt_rollover']}" itemValue="ROLLOVER" />
                <f:selectItem itemLabel="#{messages['dt_sg_contribution']}" itemValue="SG_CONTRIBUTION" />
            </h:selectOneMenu>
            <h:outputText value="#{messages['document_format']}:" />

            <h:selectOneMenu value="#{document.documentFormat}" required="true">
                <s:selectItems value="#{uploadHistoryManager.contributionFormatList}" var="contributionFormat" label="#{contributionFormat}" noSelectionLabel="Please Select..."/>
            </h:selectOneMenu>
            <h:outputText value="#{messages['upload_document']}:" />
            <s:fileUpload data="#{document.uploadedDocument}"
                            fileName="#{document.documentName}" fileSize="#{document.documentSize}"
                             />
        </h:panelGrid>
    </s:validateAll>
    <h:commandButton  styleClass="menubutton" value="#{messages['upload']}" action="#{uploader.upload}">
        <f:param name="fileUploaded" value="fileUploaded" />
        <s:conversationId/>
    </h:commandButton>
</h:form>    

我的 javascript 函数处理表单 onsubmit 事件:

ClickSuperUtil.submitForm=function()
{
    if(this.messageDisplayed == null)
    {
        this.showPleaseWaitDialog();
        this.messageDisplayed = true
        setTimeout("document.getElementById('uploadPanel').getElementsByTagName('form')[0].submit()",1000)
        return false
    }
    this.messageDisplayed = null
    return true
}

进一步的研究表明，“正常”帖子包含附加到标题中引用者的对话 ID，但 javascript 发起的帖子则没有。

普通帖子标题:

POST /connectweb/upload.seam HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.6)  
Gecko/20100625 Firefox/3.6.6 GTB7.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://localhost:8080/connectweb/upload.seam?conversationId=73
Cookie: JSESSIONID=309AA62DD4929392DD9561389F5A36BA

...

Javascript 发起的帖子标题

POST /connectweb/upload.seam HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.6)  
Gecko/20100625 Firefox/3.6.6 GTB7.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://localhost:8080/connectweb/upload.seam
Cookie: JSESSIONID=309AA62DD4929392DD9561389F5A36BA

...

seam 生成的表单 html:

<form onsubmit="return ClickSuperUtil.submitForm();" enctype="multipart/form-data" action="/connectweb/upload.seam" method="post" name="j_id14" id="j_id14">
<input type="hidden" value="j_id14" name="j_id14">
<table>
<tbody>
<tr>
<td>Document Format:</td>
<td><select size="1" name="j_id14:j_id22">  
<option value="org.jboss.seam.ui.NoSelectionConverter.noSelectionValue">Please Select...</option>
<option value="CUSCAL">CUSCAL</option>
<option value="ORACLE">ORACLE</option>
<option selected="selected" value="ROCKFAST">ROCKFAST</option>
</select></td>
</tr>
<tr>
<td>Upload Document:</td>
<td><input type="file" name="j_id14:j_id25" id="j_id14:j_id25"></td>
</tr>
</tbody>
</table>
<input type="submit" class="menubutton" value="Upload" name="j_id14:j_id26"><input type="hidden" autocomplete="off" value="H4sIAAAAAA ... /B7CYBAA==" id="javax.faces.ViewState" name="javax.faces.ViewState">
</form>

Answer 1

我之前在使用 Seam 表单时遇到问题是因为按钮本身是由 Seam 处理的。当您单击按钮(或在表单中按回车键，其作用类似于单击按钮)时，您应该在按钮的已发布表单数据中看到一个附加参数。*在您的情况下，它看起来像:

j_id14:j_id26:Upload

如果您使用 JavaScript 提交表单，则该参数不会包含在表单帖子中。没有它，Seam 不知道单击了哪个按钮，因此也不知道要调用什么操作。

*此数据在您发布的标题下方的 Firebug/开发人员工具中可见。