精通Grails: 用JSON和Ajax实现异步Grails - 编程入门网

就像您不希望将 URL 硬编码到远程 Web 服务中一样，您也不希望在视图中出现原始的 SQL。现在， 通过调用一个本地控制器，可以保证下游的客户机不受实现更改的影响。表名或字段名的更改会破坏嵌入 式的 SQL 语句，URL 的更改则会破坏嵌入式的 Ajax 调用。而通过调用 AirportMapping.iata()，则就 可以随意更改本地表和远程 GeoNames 服务中的数据源，并保证客户端界面不受影响。长远来看，为了提 升性能，甚至可以将对远程服务的调用缓存到一个本地数据库，为每个请求构建本地缓存。

现在，这个服务已经可以工作，您可以从 Web 页面调用它。

添加 ShowHotels 链接

只有当用户提供目的地机场时，才应该显示 Show Nearby Hotels 超级链接。同样，只有确认用户真 正想看到一个宾馆列表时，才应该发出远程请求。因此，首先将 showHotelsLink() 函数添加到 plan.gsp 中的脚本块中。另外，将一个对 showHotelsLink() 的调用添加到 addAirport() 的最后一行 ，如清单 16 所示：

清单 16. 实现 showHotelsLink()

function　addAirport(response,　position)　{ 　 ... 　 drawLine() 　 showHotelsLink() } function　showHotelsLink(){ 　 if(airportMarkers[1]　!=　null){ 　　 var　hotels_link　=　document.getElementById("hotels_link") 　　 hotels_link.innerHTML　=　"<a　href=''#''　onClick=''loadHotels()''>Show　Nearby　 Hotels...</a>" 　 } }

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

Grails 提供了一个 <g:remoteLink> 标记，它可以创建异步超级链接（类似于 <g:formRemote> 提供异步的表单提交），但是因为生命周期的问题，它们在这里不能用。g: 标记 是在服务器上呈现的。由于这个链接要动态地添加到客户端上，因此需要依赖一个纯 JavaScript 解决方 案。

您可能注意到对 document.getElementById("hotels_link") 的调用。将一个新的 <div> 添加 到 search <div> 的底端，如清单 17 所示：

清单 17. 添加 hotels_link <div>

<div　id="search"　style="width:25%;　float:left"> <h1>Where　to?</h1> <g:formRemote　name="from_form"　...　> <g:formRemote　name="to_form"　...> <div　id="hotels_link"></div> </div>

刷新浏览器，确认在提供一个目的地机场之后会显示超级链接，如图 6 所示：

图 6. 显示 Show Nearby Hotels 超级链接

现在，需要创建 loadHotels() 函数。

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

进行 Ajax.Remote 调用

在 plan.gsp 中的脚本块中添加一个新函数，如清单 18 所示：

清单 18. 实现 loadHotels()

function　loadHotels(){ 　 var　url　=　"${createLink(controller:''hotel'',　action:''near'')}" 　 url　+=　"?lat="　+　airportMarkers[1].getLatLng().lat() 　 url　+=　"&lng="　+　airportMarkers[1].getLatLng().lng() 　 new　Ajax.Request(url,{ 　　 onSuccess:　function(req)　{　showHotels(req)　}, 　　 onFailure:　function(req)　{　displayError(req)　} 　 }) }

在这里使用 Grails createLink 方法是安全的，因为当在服务器端呈现页面时，Hotel.near() 的 URL 的基本部分是不变的。可以使用客户端 JavaScript 将 URL 的动态部

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