Remote Form(遠程表單)最大的特點就是可以不用刷新頁面而進行提交.
wiki翻譯如下:
遠程表單允許提交表單但是不刷新頁面. 表單提交的結果可以設置為任何頁面上的元素的內容.
為了讓表單具有ajax功能, 必須使用ww:form, 指定模板主題為 "ajax". 另外, 必須配合 ww:submit 才能一起工作. ww:submit組件相關的AJAX屬性包括:
| 名稱 | 描述 |
| resultDivId (required) |
要存放結果的Html元素的id (可以是表單的id或者頁面上的任何id) |
| notifyTopics |
表單提交后,對哪些Topic進行事件激發,可以多個,用逗號分割 |
| afterLoading |
表單提交后要執行的Javascript代碼 |
Remote Form是由Form和Submit標簽協作運行的,它有三個特性:
1.可以用提交后獲取的內容替換某個id元素的內容
2.提交后可以觸發事件
3.提交后可以執行一段JavaScript
我們來看第一個例子:
<div id='two' style="border: 1px solid yellow;"><b>initial content</b></div>
<ww:form id='theForm2' cssStyle="border: 1px solid green;"
action='/AjaxRemoteForm.action' method='post' theme="ajax">
<input type='text' name='data' value='WebWork User'>
<ww:submit value="GO2" theme="ajax" resultDivId="two" />
</ww:form> |
可以看到,form必須使用ajax模板,submit標簽也是使用ajax模板(或者具有ajax模板功能的自定義模板),只有使用ajax模板,才具有提交不刷新頁面的效果,否則就是普通的表單提交了.
form沒有特殊的屬性,主要是submit的屬性resultDivId,指定目標id為"two",這個id可以是頁面上的任何一個元素的id,當然也可以是表單本身.點擊提交按鈕后,id為"two"的元素的內容被替換為表單提交的結果內容.
另外,submit還有另外2個屬性,其中之一是onLoadJS,如果在submit的屬性中指定onLoadJS,例如
<ww:submit value="GO4" theme="ajax" onLoadJS="alert('form submitted');"/>
則表單提交后會執行相應的JavaScript代碼.
另外一個屬性是notifyTopics,可以觸發Topic為指定屬性的事件,例如
<ww:div id="once" theme="ajax" cssStyle="border: 1px solid yellow;"
href="/AjaxTest.action" delay="1000"
listenTopics="scud1" loadingText="loading...">Initial Content</ww:div>
<br><br>
<ww:form id='theForm2' cssStyle="border: 1px solid green;"
action='/AjaxRemoteForm.action' method='post' theme="ajax">
<input type='text' name='data' value='WebWork User'>
<ww:submit value="GO2" theme="ajax" notifyTopics="scud1" />
</ww:form> |
提交表單將會觸發監聽Topic為"scud1"的控件的事件,它們會重載自身的內容.可以參考前面Div 標簽的說明.
注:目前beta版本不支持在Internet Explorer上運行,可以在FireFox下正常運行.(2005-9-16cvs上最新的版本可以運行在ie下了)
除經特別注明外,本文章版權歸JScud Develop團隊或其原作者所有.
轉載請注明作者和來源. scud(飛云小俠) 歡迎訪問 JScud Develop