WEB开发网
开发学院软件开发Java 精通 Grails: 用 JSON 和 Ajax 实现异步 Grails 阅读

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

 2009-10-26 00:00:00 来源:WEB开发网   
核心提示:本文讨论 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. 旅行计划页面

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

  图片看不清楚?请点击这里查看原图(大图)。

有了基本的地图之后,现在应该添加两个字段,分别用于出发地机场和目的地机场。

添加表单字段

在 “使用 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> 

1 2 3 4 5 6  下一页

Tags:精通 Grails JSON

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接