精通 Grails: 用 JSON 和 Ajax 实现异步 Grails

核心提示：本文讨论 Grails 对于其互补技术 JSON 和 Ajax 的支持，在前几期的 精通 Grails 系列文章中，精通 Grails: 用 JSON 和 Ajax 实现异步 Grails，JSON 和 Ajax 都扮演支援者的角色，而这一次，您将再次使用它，同时，它们担任主角，您将使用内置的 Prototype 库和

本文讨论 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>