Remote Form(遠(yuǎn)程表單)最大的特點就是可以不用刷新頁面而進(jìn)行提交.
wiki翻譯如下:
遠(yuǎn)程表單允許提交表單但是不刷新頁面. 表單提交的結(jié)果可以設(shè)置為任何頁面上的元素的內(nèi)容.
為了讓表單具有ajax功能, 必須使用ww:form, 指定模板主題為 "ajax". 另外, 必須配合 ww:submit 才能一起工作. ww:submit組件相關(guān)的AJAX屬性包括:
| 名稱 | 描述 |
| resultDivId (required) |
要存放結(jié)果的Html元素的id (可以是表單的id或者頁面上的任何id) |
| notifyTopics |
表單提交后,對哪些Topic進(jìn)行事件激發(fā),可以多個,用逗號分割 |
| afterLoading |
表單提交后要執(zhí)行的Javascript代碼 |
Remote Form是由Form和Submit標(biāo)簽協(xié)作運行的,它有三個特性:
1.可以用提交后獲取的內(nèi)容替換某個id元素的內(nèi)容
2.提交后可以觸發(fā)事件
3.提交后可以執(zhí)行一段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標(biāo)簽也是使用ajax模板(或者具有ajax模板功能的自定義模板),只有使用ajax模板,才具有提交不刷新頁面的效果,否則就是普通的表單提交了.
form沒有特殊的屬性,主要是submit的屬性resultDivId,指定目標(biāo)id為"two",這個id可以是頁面上的任何一個元素的id,當(dāng)然也可以是表單本身.點擊提交按鈕后,id為"two"的元素的內(nèi)容被替換為表單提交的結(jié)果內(nèi)容.
另外,submit還有另外2個屬性,其中之一是onLoadJS,如果在submit的屬性中指定onLoadJS,例如
<ww:submit value="GO4" theme="ajax" onLoadJS="alert('form submitted');"/>
則表單提交后會執(zhí)行相應(yīng)的JavaScript代碼.
另外一個屬性是notifyTopics,可以觸發(fā)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> |
提交表單將會觸發(fā)監(jiān)聽Topic為"scud1"的控件的事件,它們會重載自身的內(nèi)容.可以參考前面Div 標(biāo)簽的說明.
注:目前beta版本不支持在Internet Explorer上運行,可以在FireFox下正常運行.(2005-9-16cvs上最新的版本可以運行在ie下了)
除經(jīng)特別注明外,本文章版權(quán)歸JScud Develop團(tuán)隊或其原作者所有.
轉(zhuǎn)載請注明作者和來源. scud(飛云小俠) 歡迎訪問 JScud Develop