WebWork2.2新特性: AJAX之Remote Form (转载)

来源:互联网 发布:阿里云学生机自动签到 编辑:程序博客网 时间:2024/04/30 02:05

原作者:飞云小侠

博客:http://www.blogjava.net/scud/archive/2005/09/14/13025.html

 

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下了)

 

原创粉丝点击