Play 中如何使用 Ajax
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);
});
继续讨论
处理 国际化.
Play 中如何使用 Ajax的更多相关文章
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- 想抛就抛:Application_Error中统一处理ajax请求执行中抛出的异常
女朋友不是想抛就抛,但异常却可以,不信请往下看. 今天在MVC Controller中写代码时,纠结了一下: public async Task<ActionResult> Save(in ...
- 使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题
想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服 ...
- 在MVC中要实现Ajax
在MVC中要实现Ajax有很多的方式,有微软自己的MicrosoftAjax,也可以用JQuery的AJax来实现,如果对其他的JavaScript框架熟悉,还可以采用其他的实现方案,比如说Proto ...
- 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...
- bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind
今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一 ...
- EF5+MVC4系列(11)在主视图中用Html.RenderPartial调用分部视图(ViewDate传值);在主视图中按钮用ajax调用子action并在子action中使用return PartialView返回分布视图(return view ,return PartialView区别)
一:主视图中使用Html.RenderPartial来调用子视图(注意,这里是直接调用子视图,而没有去调用子Action ) 在没有使用母版页的主视图中(也就是设置了layout为null的视图中), ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
随机推荐
- javaweb+SSH实现简单的权限管理系统
权限管理,平时里很多地方我们都可以看到,比如聊QQ时群里的群主.管理员以及成员之间的功能是不一样的--大家一定会遇到的一个问题,所以整理 一下自己写权限系统的一些经验给大家,只起参考作用,也望大家笑纳 ...
- Android入门(十三)内容提供器
原文链接:http://www.orlion.ga/612/ 内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一 ...
- codeforces Gargari and Permutations(DAG+BFS)
/* 题意:求出多个全排列的lcs! 思路:因为是全排列,所以每一行的每一个数字都不会重复,所以如果有每一个全排列的数字 i 都在数字 j的前面,那么i, j建立一条有向边! 最后用bfs遍历整个图, ...
- UvaOJ10369 - Arctic Network
/* The first line of each test case contains 1 <= S <= 100, the number of satellite channels! ...
- js中的一个方法怎么将数据主动传给另一个方法
项目有这样的一个需求,一个不断接收实时数据的有返回值的js方法Function A在运行,同时我想将接收到的这些数据进行分解提取想要的部分并传给Function B.如何实现? Function A( ...
- 学习RxJS: 导入
原文地址:http://www.moye.me/2016/05/31/learning_rxjs_part_one_preliminary/ 引子 新手们在异步编程里跌倒时,永远会有这么一个经典问题: ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- Java学习笔记之使用反射+泛型构建通用DAO
PS:最近简单的学了学后台Servlet+JSP.也就只能学到这里了.没那么多精力去学SSH了,毕竟Android还有很多东西都没学完.. 学习内容: 1.如何使用反射+泛型构建通用DAO. 1.使用 ...
- [New Portal]Windows Azure Virtual Machine (23) 使用Storage Space,提高Virtual Machine磁盘的IOPS
<Windows Azure Platform 系列文章目录> 注意:如果使用Azure Virtual Machine,虚拟机所在的存储账号建议使用Local Redundant.不建议 ...
- 我的游戏蜗牛web前端面试经历
蜗牛在江苏苏州地区应该算是比较大的互联网公司了,可以称得上中国游戏的鼻祖,之前一直很想进蜗牛,但作为一个应届毕业生却没有看到蜗牛发布任何关于招聘实习生的职位,无奈之下于是就毛遂自荐了,主动以邮件的形式 ...