精通 Grails: 用 JSON 和 Ajax 实现异步 Grails
2009-10-26 00:00:00 来源:WEB开发网本文讨论 Grails 对于其互补技术 JSON 和 Ajax 的支持。在前几期的 精通 Grails 系列文章中,JSON 和 Ajax 都扮演支援者的角色,而这一次,它们担任主角。您将使用内置的 Prototype 库和 Grails <formRemote> 标记发出一个 Ajax 请求。您还将看到一些关于提供本地 JSON 和通过 Web 动态获得 JSON 的例子。
为了进行演示,您将组建一个旅行计划页面,在该页面中,用户可以输入出发地机场和目的地机场。当机场显示在一个 Google Map 上时,用户可通过一个链接搜索目的地机场附近的宾馆。图 1 显示了这个页面:
图 1. 旅行计划页面
图片看不清楚?请点击这里查看原图(大图)。
有了基本的地图之后,现在应该添加两个字段,分别用于出发地机场和目的地机场。
添加表单字段
在 “使用 Ajax 实现多对多关系” 中,您使用了 Prototype 的 Ajax.Request 对象。在本文的后面,当从一个远程源获取 JSON 时,您将再次使用它。同时,您将使用 <g:formRemote> 标记。将清单 10 中的 HTML 添加到 grails-app/views/trip/plan.gsp 中:
清单 10. 使用 <g:formRemote>
<div id="search" style="width:25%; float:left">
<h1>Where to?</h1>
<g:formRemote name="from_form"
url="[controller:'airportMapping', action:'iata']"
onSuccess="addAirport(e, 0)">
From:<br/>
<input type="text" name="id" size="3"/>
<input type="submit" value="Search" />
</g:formRemote>
<div id="airport_0"></div>
<g:formRemote name="to_form"
url="[controller:'airportMapping', action:'iata']"
onSuccess="addAirport(e, 1)">
To: <br/>
<input type="text" name="id" size="3"/>
<input type="submit" value="Search" />
</g:formRemote>
<div id="airport_1"></div>
</div>
赞助商链接