为查询添加 Ajax 效果
来源:互联网 发布:怎么学会编程 编辑:程序博客网 时间:2024/05/18 03:54
现在 Ajax 应用十分流行,Grails 同样也做到了与时俱进,它提供了实现 Ajax 的标签。
首先为页面添加 JavaScript 库:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="layout" content="main" />
<g:javascript library="prototype" />
<g:javascript library="prototype/effects"/>
<title>Search Member</title>
</head>
然后创建一个空的 div,用于显示查询结果:<div id="message"></div>
。
修改查询按扭的代码,使之执行 Ajax 表单提交:
<g:submitToRemote action="search" update="message" value="search"/>
表面上看按扭没有发生什么变化,但实际上,点击 search 按扭,将提交一个 Ajax 的请求,并用返回的内容去更新 id 为 message 的 div。
接下来创建一个新的页面 listMember.gsp,专门用来显示查询返回的表格。
<g:if test="${ memberList.size() > 0 }">
<table>
<tr>
<th>Name</th><th>Email</th><th>Gender</th>
<th>Address</th><th>Phone</th><th>Team</th>
</tr>
<g:each in="${memberList}" status="i" var="member">
<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<td><g:link action="show" id="${member.id}">
${member.name?.encodeAsHTML()}</g:link>
</td>
<td>${member.email?.encodeAsHTML()}</td>
<td>${member.gender?.encodeAsHTML()}</td>
<td>${member.address?.encodeAsHTML()}</td>
<td>${member.phone?.encodeAsHTML()}</td>
<td>${member.team?.teamName.encodeAsHTML()}</td>
</tr>
</g:each>
</table>
</g:if>
<g:else>
<p align="center">Sorry, No result meets your search criteria.</p>
</g:else>
并修改 Action 的相关代码,使查询完成后调 listMembers.gsp 进行显示。
render(view:"listMember",model:[memberList: resultList]);
经过简单的改造,查询功能已经支持 Ajax 效果了,但效果还不够绚。
再修改一处,使查询结果以从小到大渐变的动画方式显示出来。只需要让 g:submitToRemote
捕捉一个 OnComplete
事件:
<g:submitToRemote action="search" update="message"
value="search" onComplete="new Effect.Grow('message');"/>
刷新一下再次搜索,效果是不是好了许多?
- 为查询添加 Ajax 效果
- 为struts2的表单验证添加ajax效果
- 为Struts2的表单验证添加AJAX效果实例
- 在WEB中为页面加载或查询时间添加loading效果
- 为表格添加斑马线效果
- 为GridView添加动画效果
- 为view添加阴影效果
- 为ListView添加Ripple效果
- 为GridView添加边框效果
- 为UIImage添加滤镜效果
- [转]javascript为图片添加水印效果
- 为TextFiled添加CSS样式,下划线效果
- Hack6-为ViewGroup添加动画效果
- Android Animation 为布局添加动画效果
- Unity为物体添加物理碰撞效果
- 为控件添加动画效果(安卓)
- 为文本添加发亮的效果
- 为项目添加滑动删除效果
- 我从来不是没有梦想。。
- 使用 Grails 快速开发 Web 应用程序--Web 开发的关键要素
- 我的python开发环境
- 使用 Grails 快速开发 Web 应用程序--定制页面
- 高级搜索功能
- 为查询添加 Ajax 效果
- 登录以保护应用
- 运行与部署
- 现在的自己
- 关于 Groovy
- 数制和编码
- Groovy 初探
- ajax学习笔记---Ajax五步法
- Windows下hook函数的几种方法