play 集成 Ajax请求

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>

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