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& ...
随机推荐
- elastic-job
github源码: https://github.com/dangdangdotcom/elastic-job maven中央仓: http://repo1.maven.org/maven2/com/ ...
- backbone库学习-Router
backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文的例子来自http://blog.csdn.n ...
- iOS_UIImage_给图片添加水印
github地址: https://github.com/mancongiOS/UIImage.git UIImage的Category UIImage+ImageWaterPrint.h #impo ...
- JAVA 设计模式 迭代器模式
用途 迭代器模式 (Iterator) 提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示. 迭代器模式是一种行为型模式. 结构
- CSS3魔法堂:认识@font-face和Font Icon
一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...
- 利用jstree插件轻松构建树应用
最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...
- The conversion of a datetime2 data type to a datetime data type resulted in an out-of-range value. 错误的原因及解决方案
异常描述: 数据访问用EF,在数据库中用getdate()设置的默认值,程序中没有赋值. 出现异常. 此错误在百度上在我写此文之前没有多少解决方案,谷歌之等到以下两个有用的页: http://stac ...
- 【原创】Kakfa utils源代码分析(二)
我们继续研究kafka.utils包 八.KafkaScheduler.scala 首先该文件定义了一个trait:Scheduler——它就是运行任务的一个调度器.任务调度的方式支持重复执行的后台任 ...
- js中的正则表达式使用
function myValid() { var errorMsg = ""; var res = true; //拿到要验证的值. var receiveName = $(&qu ...
- JavaScript中的parseInt的进制问题
昨天帮原来同学写个js,碰见个问题,parseInt('08')的结果竟然是0后来突然想过来,是八进制的原因parseInt 方法 返回由字符串转换得到的整数.parseInt(numString, ...