现在 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');"/>
|
刷新一下再次搜索，效果是不是好了许多？