10.12.1 集成jQuery#

      本節(jié)將以簡(jiǎn)單的Ajax應(yīng)用為例，介紹在Play框架中如何使用jQuery提供的Ajax支持。

10.12.2 使用#{jsAction /}#

      Play提供的#{jsAction /}標(biāo)簽會(huì)返回一個(gè)Javascript函數(shù)，該JavaScript函數(shù)由基于Action方法的URL連接和自由變量組成。它并不會(huì)自動(dòng)執(zhí)行Ajax請(qǐng)求，而需要我們先手動(dòng)對(duì)返回的URL進(jìn)行配置。

      下面介紹Play應(yīng)用的Ajax實(shí)例。首先在控制器Hotels中定義Action方法list，用于處理瀏覽器異步提交的請(qǐng)求。list方法定義完成后為其配制路由規(guī)則：

GET     /hotels/list        Hotels.list
      我們?cè)诳蛻舳酥锌梢酝ㄟ^(guò)以下方式導(dǎo)入路由：
<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>
      在這個(gè)例子中，我們向Hotels控制器中的list方法發(fā)送請(qǐng)求，請(qǐng)求中包含search，size和page三個(gè)參數(shù)。之后將請(qǐng)求保存在listAction變量中，使用load函數(shù)通過(guò)jQuery處理該請(qǐng)求（這里處理的是HTTP GET請(qǐng)求）。以下就是所發(fā)送請(qǐng)求的具體URL：
GET /hotels/list?search=x&size=10&page=1
      以這種方式發(fā)送請(qǐng)求會(huì)返回HTML數(shù)據(jù)。當(dāng)然，我們也可以在控制器中使用適當(dāng)?shù)匿秩痉椒ǎ祷仄渌?#26684;式的數(shù)據(jù)，比如renderJSON, renderxml或者直接使用XML的模版等。在客戶端接收到JSON或者XML數(shù)據(jù)后，可以通過(guò)jQuery進(jìn)行格式轉(zhuǎn)換。如果讀者還想了解更多細(xì)節(jié)問(wèn)題，可以查閱jQuery相關(guān)內(nèi)容。
      如果讀者需要使用POST請(qǐng)求，只需要將jQuery方法進(jìn)行轉(zhuǎn)換即可：
$.post(listAction(), function(data) {  $('#result').html(data);});
10.12.3 使用#{jsRoute /}#
      Play提供的#{jsRoute /}標(biāo)簽，可以幫助開(kāi)發(fā)者更好地管理路由。#{jsRoute /}標(biāo)簽的使用方法很簡(jiǎn)單，并且與#{jsAction /}類(lèi)似，但是不同的地方為#{jsRoute /}標(biāo)簽返回的是一個(gè)對(duì)象。該對(duì)象包含基于服務(wù)端Action的URL，以及相應(yīng)的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 /}標(biāo)簽所帶來(lái)的好處是顯而易見(jiàn)的，開(kāi)發(fā)者只需要修改routes路由文件，就可以統(tǒng)一地改變HTTP方法，而不再需要一個(gè)一個(gè)查看和修改模板文件了