WebWork2.2新特性(九) AJAX之Remote Form

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

posted on 2005-09-14 16:29 Scud(飞云小侠) 阅读(1208) 评论(1)  编辑  收藏 所属分类: WEB

评论

# re: WebWork2.2新特性(九) AJAX之Remote Form 2005-09-16 12:30 scud

remote form 最新cvs上的版本已经可以在ie上运行.  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
<2005年9月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

导航

统计

公告

文章发布许可
创造共用协议:署名,非商业,保持一致

我的邮件
cnscud # gmail


常用链接

留言簿(14)

随笔分类(113)

随笔档案(103)

相册

友情链接

技术网站

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜