精通Grails: 使用Ajax实现多对多关系 - 编程入门网

清单 12. 从 controller 返回 JSON

def getJson = { 　 def airport = Airport.findByIata(params.iata) 　 if(!airport){ 　　 airport = new Airport(iata:params.iata, name:"Not found") 　 } 　 render airport as JSON }

要验证 JSON 转换是否生效，可以在 Web 浏览器中输入 http://localhost:9090/trip/airport/getJson?iata=den。应该会得到清单 13 中显示的响应（您也许 需要在浏览器中选择 View > Source 查看 JSON 响应）。

清单 13. JSON 响应

{"id":1,"class":"Airport","city": 　 "Denver","country":"US","iata": "DEN","name":"Denver International Airport","state":"CO"}

返回一组航空公司的过程非常简单：render Airline.list() as JSON。

现在生成了 JSON，是时候使用它了。我将把 departureAirport 的现有 <g:select> 注释掉， 并替换为清单 14 中的 4 行代码：

清单 14. 使用一个文本字段替换选择字段

<div id="departureAirportText">[Type an Airport IATA Code]</div> <input type="hidden" name="departureAirport.id" value="-1" 　 id="departureAirport.id"/> <input type="text" name="departureAirportIata" id="departureAirportIata"/> <input type="button" value="Find" onClick="get(''departureAirport'')"/>

第一行是一个只读显示区域。注意，它具有一个 id。ID 在整个 HTML Document Object Model (DOM) 中必须是惟一的。稍后我将使用句柄 departureAirportText 写出 JSON 调用的结果。

提交表单时，<div> 不会被发送回服务器；但表单控件（比如输入和选择控件）会被发送回服 务器。当整个表单提交到服务器时，隐藏的文本字段提供了一个存储 Airport 的 id 的位置。

用户将在名为 departureAirportIata 的文本字段中输入 IATA 编码。为名称和 ID 都提供相同的值 可能不是很好，但 HTML 机制需要这样做。提交表单时，名称将会传回到服务器。ID 是我调用 getJson 闭包的条件。

最后，最后一行代码是一个按钮，单击它时，会调用一个名为 get 的 JavaScript 函数。稍后我将会 展示 get 函数的实现。图 2 展示了新表单的外观：

图 2. 改进的表单

精通Grails: 使用Ajax实现多对多关系(7)

将 Prototype 用于 Ajax 调用

Grails 附带了一个名为 Prototype 的 JavaScript 库（参见 参考资料）。Prototype 提供了一种执 行 Ajax 调用的通用方法，这种方法兼容所有主流浏览器。get 函数构建您在之前输入浏览器的 URL，然 后对服务器执行异步调用。如果调用成功（返回 HTTP 200），则会调用 update 函数。清单 15 使用 Prototype 进行 Ajax 调用：

清单 15. 将 Prototype 用于 Ajax 调用

<g:javascript library="prototype" /> <script type="text/javascript"> 　 function get(air

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!