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方法，而不再需要一個一個查看和修改模板文件了