Play 中如何使用 Ajax

本章譯者：@freewind

Play在內(nèi)部使用了 jQuery 這個JavaScript庫，讓我們能夠非常方便的進(jìn)行Ajax操作。同時，為了能在JavaScript中方便地生成某個action對應(yīng)的Url，Play還提供了一個 jsAction 標(biāo)簽，簡化操作。

配合jQuery使用jsAction標(biāo)簽

在play的頁面中，如果我們想取得某action對應(yīng)的url，通常不會直接寫出一個url，而是像Java那樣寫成一個函數(shù)調(diào)用，由Play解析并生成。這么做的好處是，可以讓Play檢查我們的調(diào)用有沒有錯，不會產(chǎn)生錯誤的URL。

舉例說明，我們在routes文件中，定義了以下的一個route：

GET     /hotels/list        Hotels.list

其中, Hotels.list 有三個參數(shù) search, size, page 。如果我們想得到它對應(yīng)的URL，會這么做：

@{Hotels.list('x', 10, 1)}

注意，參數(shù)值必須指定好。最終我們將得到一個這樣的URL:

/hotels/list?page=10&search=x&size=1

但有些時候，參數(shù)值無法事先確定。比如我們想在JavaScript中，利用Ajax的方法訪問這個URL，而參數(shù)值是根據(jù)由用戶輸入的，怎么辦？

#{jsAction /} 標(biāo)簽就是為了解決這個問題，它的作用是生成一個JavaScript函數(shù)，調(diào)用該函數(shù)并傳入一些參數(shù)后，會生成相應(yīng)的正確的url。

先寫一段完整些的例子:

<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>

在本例中，我們使用了 jsAction 。其中這一行代碼：

var listAction = #{jsAction @list(':search', ':size', ':page') /}

將生成以下內(nèi)容：

var listAction = function(options) {	var pattern = '/hotels/list?page=:page&search=:search&size=:size'; 	for(key in options) { pattern = pattern.replace(':'+key, options[key]); } 	return pattern }

可以看到，它的原理非常簡單：構(gòu)造一個url，里面有一些占位符，將會被替換為真實的數(shù)據(jù)。

所以后面的 listAction({search: 'x', size: '10', page: '1'}) 調(diào)用listAction后，將返回一個正確的Url: /hotels/list?page=10&search=x&size=1

如果我們不使用 listAction 標(biāo)簽，也得自己寫一個類似的函數(shù)。

另外， .load() 函數(shù)是由jQuery提供的，它將發(fā)起一個Ajax GET請求，請求地址為它的第一個參數(shù)。第二個參數(shù)是一個函數(shù)，將在成功收到回復(fù)后被調(diào)用。

最終，這段代碼發(fā)送的請求如下：

GET /hotels/list?search=x&size=10&page=1

返回值將會是一些HTML代碼，這些代碼將會替換掉 #result 中的內(nèi)容。

除了HTML，jQuery還可以處理JSON或XML類型的返回值。我們只需要在對應(yīng)的controller中，使用不同的render方法即可（如renderJSON, renderXML, 或者直接使用render去處理一個XML模板）。

有關(guān)jQuery的詳細(xì)信息，可參考 jQuery 官方文檔。

另外，如果我們需要發(fā)送一個POST請求，可以使用以下的代碼：

$.post(listAction, function(data) {  $('#result').html(data);});