Play 中如何使用 Ajax

时间：2023-12-09 22:51:49

Play在内部使用了 jQuery 这个JavaScript库，让我们能够非常方便的进行Ajax操作。同时，为了能在JavaScript中方便地生成某个action对应的Url，Play还提供了一个 jsAction 标签，简化操作。

配合jQuery使用jsAction标签

在play的页面中，如果我们想取得某action对应的url，通常不会直接写出一个url，而是像Java那样写成一个函数调用，由Play解析并生成。这么做的好处是，可以让Play检查我们的调用有没有错，不会产生错误的URL。

举例说明，我们在routes文件中，定义了以下的一个route：

GET     /hotels/list        Hotels.list

其中, Hotels.list 有三个参数 search, size, page。如果我们想得到它对应的URL，会这么做：

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

注意，参数值必须指定好。最终我们将得到一个这样的URL:

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

但有些时候，参数值无法事先确定。比如我们想在JavaScript中，利用Ajax的方法访问这个URL，而参数值是根据由用户输入的，怎么办？

#{jsAction /} 标签就是为了解决这个问题，它的作用是生成一个JavaScript函数，调用该函数并传入一些参数后，会生成相应的正确的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') /}

将生成以下内容：

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

}

可以看到，它的原理非常简单：构造一个url，里面有一些占位符，将会被替换为真实的数据。

所以后面的 listAction({search: 'x', size: '10', page: '1'}) 调用listAction后，将返回一个正确的Url:/hotels/list?page=10&search=x&size=1

如果我们不使用 listAction 标签，也得自己写一个类似的函数。

另外， .load() 函数是由jQuery提供的，它将发起一个Ajax GET请求，请求地址为它的第一个参数。第二个参数是一个函数，将在成功收到回复后被调用。

最终，这段代码发送的请求如下：

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

返回值将会是一些HTML代码，这些代码将会替换掉 #result 中的内容。

除了HTML，jQuery还可以处理JSON或XML类型的返回值。我们只需要在对应的controller中，使用不同的render方法即可（如renderJSON, renderXML, 或者直接使用render去处理一个XML模板）。

有关jQuery的详细信息，可参考 jQuery 官方文档。

另外，如果我们需要发送一个POST请求，可以使用以下的代码：

$.post(listAction, function(data) {

  $('#result').html(data);

});

继续讨论

处理 国际化.

相关文章