将 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(airportField){
var baseUrl = "${createLink(controller:'airport', action:'getJson')}"
var url = baseUrl + "?iata=" + $F(airportField + "Iata")
new Ajax.Request(url, {
method: 'get',
asynchronous: true,
onSuccess: function(req) {update(req.responseText, airportField)}
})
}
...
</script>
<script type="text/javascript">
function get(airportField){
var baseUrl = "${createLink(controller:'airport', action:'getJson')}"
var url = baseUrl + "?iata=" + $F(airportField + "Iata")
new Ajax.Request(url, {
method: 'get',
asynchronous: true,
onSuccess: function(req) {update(req.responseText, airportField)}
})
}
...
</script>
update 函数读取 JSON 调用的结果，更新的显示，并将隐藏字段的值更改为机场的主键(如果找到的话)，或者更改为 -1(如果未找到主键)。清单 16 展示了 update 函数：
清单 16. 使用 JSON 数据更新字段
function update(json, airportField){
var airport = eval( "(" + json + ")" )
var output = $(airportField + "Text")
output.innerHTML = airport.iata + " - " + airport.name
var hiddenField = $(airportField + ".id")
airport.id == null ? hiddenField.value = -1 : hiddenField.value = airport.id
}
var airport = eval( "(" + json + ")" )
var output = $(airportField + "Text")
output.innerHTML = airport.iata + " - " + airport.name
var hiddenField = $(airportField + ".id")
airport.id == null ? hiddenField.value = -1 : hiddenField.value = airport.id
}
图 3 展示了两次成功执行 Ajax 调用之后 Flight 表单的外观：
图 3. 通过 Ajax 调用填充的表单
