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的更多相关文章

  1. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  2. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  3. 想抛就抛:Application_Error中统一处理ajax请求执行中抛出的异常

    女朋友不是想抛就抛,但异常却可以,不信请往下看. 今天在MVC Controller中写代码时,纠结了一下: public async Task<ActionResult> Save(in ...

  4. 使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题

    想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服 ...

  5. 在MVC中要实现Ajax

    在MVC中要实现Ajax有很多的方式,有微软自己的MicrosoftAjax,也可以用JQuery的AJax来实现,如果对其他的JavaScript框架熟悉,还可以采用其他的实现方案,比如说Proto ...

  6. 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

  7. bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

    今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一 ...

  8. EF5+MVC4系列(11)在主视图中用Html.RenderPartial调用分部视图(ViewDate传值);在主视图中按钮用ajax调用子action并在子action中使用return PartialView返回分布视图(return view ,return PartialView区别)

    一:主视图中使用Html.RenderPartial来调用子视图(注意,这里是直接调用子视图,而没有去调用子Action ) 在没有使用母版页的主视图中(也就是设置了layout为null的视图中), ...

  9. 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作

    PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...

随机推荐

  1. 查看SSIS Package 部署的历史记录

    1,通过Integration Services Catalogs来查看 打开SSISDB->Projects,查看指定project的version history,这种方式查看Deploye ...

  2. Myeclipse 操作数据库

    步骤1:通过MyEclipse中的window->show View->other 调出.DB浏览器,和 SQL Results 步骤2. 可以右键单击空白处,选择new,创建一个新的DB ...

  3. Hadoop官方文档翻译—— YARN ResourceManager High Availability 2.7.3

    ResourceManager High Availability (RM高可用) Introduction(简介) Architecture(架构) RM Failover(RM 故障切换) Rec ...

  4. spring aop源码实现分析

    1. 先分析Advice before执行Cglib2AopProxy的intercept方法: /** * General purpose AOP callback. Used when the t ...

  5. redis java对象操作

    使用Jedis客户端 1. java 对象,需序列化 public class Person implements Serializable { private int id; private Str ...

  6. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  7. EasyUI treegrid 获取编辑状态中某字段的值 [getEditor方法获取不到editor]

    如题,在treegrid里,按照api里getEditor方法的说明, getEditoroptionsGet the specified editor, the options contains t ...

  8. Android之Notification介绍

    Notification就是在桌面的状态通知栏.这主要涉及三个主要类: Notification:设置通知的各个属性. NotificationManager:负责发送通知和取消通知 Notifica ...

  9. J2EE修炼之四书五经[转自2004年程序员]

    J2EE修炼之四书五经 作者:彭晨阳 J2EE其实没有四书五经,因为J2EE一直如汹涌澎湃的大江,推陈出新,不断高速发展,这是一种带领我们走向未来的技术.当然,如何在这种气势如虹的潮流之中不至于迷失方 ...

  10. resin4 发布war包

    1.将web项目打包成xxxx.war 2.将war包放到webapps下 3.修改conf/resin.xml文件如下部分: <!-- - Configures the main applic ...