精通 Grails: 用 JSON 和 Ajax 实现异步 Grails-技术开发专区

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

作者：AboutGroovy.com Scott Davis 编辑：宋娜 2009-07-06 10:49 来源：IT168�

　　添加表单字段

　　在 “使用 Ajax 实现多对多关系” 中，您使用了 Prototype 的 Ajax.Request 对象。在本文的后面，当从一个远程源获取 JSON 时，您将再次使用它。同时，您将使用标记。将清单 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>

在浏览器中单击 Refresh 按钮，看看新的变化，如图 4 所示：

　　如果使用常规的，那么，当用户提交表单时，将刷新整个页面。如果选择，则由一个 Ajax.Request 在幕后异步地执行表单提交。输入文本字段被命名为 id，确保在控制器中填充 params.id。上的 url 属性清楚地表明，当用户单击提交按钮时，将调用 AirportMappingController.iata()。

　　这里不能使用 “使用 Ajax 实现多对多关系” 中的，因为不能将一个 HTML 表单嵌入到另一个 HTML 表单中。但是，这里可以创建两个不同的表单，而且不必自己编写 Prototype 代码。异步 JSON 请求的结果将被传递给 addAirport() JavaScript 函数。

　　接下来的任务是创建 addAirport()。

第1页：Ajax 和 JSON 简史第2页：JSON 的优点第3页：在 Grails 控制器中呈现 JSON 第4页：测试控制器第5页：设置初始的 Google Map 第6页：添加表单字段第7页：添加处理 JSON 的 JavaScript 第8页：远程 JSON 还是本地 JSON?第9页：创建用于发出远程 JSON 请求的控制器方法第10页：添加 ShowHotels 链接第11页：进行 Ajax.Remote 调用第12页：处理错误第13页：处理成功第14页：结束语

关注我们