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& ...
随机推荐
- VS2010项目缺少组件
遇到的问题是解决方案中部分项目无法加载, 提示需要缺少的web组件才能加载该项目,是否通过WEB安装组件来网络安装, 点击确定以后就什么也没有了. 网上查阅了一番,结合自己的使用情况(在家里用的是vs ...
- Node出错导致运行崩溃的解决方案
许多人都有这样一种映像,NodeJS比较快: 但是因为其是单线程,所以它不稳定,有点不安全,不适合处理复杂业务: 它比较适合对并发要求比较高,而且简单的业务场景. 在Express的作者的TJ Hol ...
- Java多线程系列--“基础篇”11之 生产消费者问题
概要 本章,会对“生产/消费者问题”进行讨论.涉及到的内容包括:1. 生产/消费者模型2. 生产/消费者实现 转载请注明出处:http://www.cnblogs.com/skywang12345/p ...
- IOS开发-KVC
1. 什么是kvc kvc--key-value coding,健值编码 可以通过key直接访问对象属性的value的方法 2.使用场景 kvc主要是为了让代码变的更简介明了 用的比较多的是在后台数据 ...
- 轻松自动化---selenium-webdriver(python) (五)
本节要解决的问题: 层级定位 场景: 假如两个控件,他们长的一模样,还都叫“张三”,唯一的不同是一个在北京,一个在上海,那我们就可以通过,他们的城市,区,街道,来找到他们. 在实际的测试中也经常会遇到 ...
- Web 前端开发人员和设计师必读文章推荐【系列二十八】
<Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- ibatis轻松入门
近日,由于公司项目应用开发的逻辑层使用的是iBatis.上网查了些资料,自己写了点demo入门.感觉良好.iBatis实在是比Hibernate很容易入门,贡献出来与各路菜鸟分享(后文附源码),希望得 ...
- TCP与UDP在socket编程中的区别
一.TCP与UDP的区别 基于连接与无连接 对系统资源的要求(TCP较多,UDP少) UDP程序结构较简单 流模式与数据报模式 TCP保证数据正确性,UDP可能丢包 TCP保证数据顺序,UD ...
- APP账号密码传输安全分析
最近在搞公司的安卓APP测试(ThinkDrive 企邮云网盘)测试,安卓app测试时使用代理抓包,发现所此app使用HTTP传输账号密码,且密码只是普通MD5加密,存在安全隐患,无法 ...
- Java之HashMap在多线程情况下导致死循环的问题
PS:不得不说Java编程思想这本书是真心强大.. 学习内容: 1.HashMap<K,V>在多线程的情况下出现的死循环现象 当初学Java的时候只是知道HashMap<K,V& ...