play 集成 Ajax请求

发布时间：2020-12-16 03:32:09 所属栏目：百科来源：网络整理

导读：10.12.1 集成jQuery# Play默认集成了jQuery库，并将其存放于应用的public/javascripts目录。框架对jQuery进行了封装，提供#{jsAction /}标签简化了请求异步调用控制器中的Action方法，因此我们可以通过jQuery非常方便地处理Ajax请求。本节将以简单的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方法，而不再需要一个一个查看和修改模板文件了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!