play 集成 Ajax请求

10.12.1 集成jQuery#

      本节将以简单的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>      使用#{jsRoute /}标签所带来的好处是显而易见的，开发者只需要修改routes路由文件，就可以统一地改变HTTP方法，而不再需要一个一个查看和修改模板文件了