10.12.1 集成jQuery#
Play默认集成了jQuery库，并将其存放于应用的public/javascripts目录。框架对jQuery进行了封装，提供#{jsAction /}标签简化了请求异步调用控制器中的Action方法，因此我们可以通过jQuery非常方便地处理Ajax请求。本节将以简单的Ajax应用为例，介绍在Play框架中如何使用jQuery提供的Ajax支持。
10.12.2 使用#{jsAction /}#
Play提供的#{jsAction /}标签会返回一个JavaScript函数，该JavaScript函数由基于Action方法的URL连接和自由变量组成。它并不会自动执行Ajax请求，而需要我们先手动对返回的URL进行配置。
下面介绍Play应用的Ajax实例。首先在控制器Hotels中定义Action方法list，用于处理浏览器异步提交的请求。list方法定义完成后为其配制路由规则：
GET /hotels/list Hotels.list
我们在客户端中可以通过以下方式导入路由：
<script type="text/javascript"> var listAction = #{jsAction @list(':search',':size',':page') /} $('#result').load( listAction({search: 'x', size: '10', page: '1'}), function() { $('#content').css('visibility', 'visible') } ) </script>
在这个例子中，我们向Hotels控制器中的list方法发送请求，请求中包含search，size和page三个参数。之后将请求保存在listAction变量中，使用load函数通过jQuery处理该请求（这里处理的是HTTP GET请求）。以下就是所发送请求的具体URL：
GET /hotels/list?search=x&size=10&page=1
以这种方式发送请求会返回HTML数据。当然，我们也可以在控制器中使用适当的渲染方法，返回其他格式的数据，比如renderjson,renderXML或者直接使用XML的模版等。在客户端接收到JSON或者XML数据后，可以通过jQuery进行格式转换。如果读者还想了解更多细节问题，可以查阅jQuery相关内容。
如果读者需要使用POST请求，只需要将jQuery方法进行转换即可：
$.post(listAction(), function(data) { $('#result').html(data); });
10.12.3 使用#{jsRoute /}#
Play提供的#{jsRoute /}标签，可以帮助开发者更好地管理路由。#{jsRoute /}标签的使用方法很简单，并且与#{jsAction /}类似，但是不同的地方为#{jsRoute /}标签返回的是一个对象。该对象包含基于服务端Action的URL，以及相应的HTTP方法（GET、POST等），具体范例如下所示。<script type="text/javascript"> var updateUserRoute = #{jsRoute @Users.update(':id') /} $.ajax({ url: updateUserRoute.url({id: userId}), type: updateUserRoute.method, data: 'user.name=Guillaume' }); </script>