zoukankan      html  css  js  c++  java
  • 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);
    });
    

    继续讨论

    处理 国际化.

  • 相关阅读:
    Java实现 LeetCode 382 链表随机节点
    Java实现 LeetCode 382 链表随机节点
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 380 常数时间插入、删除和获取随机元素
    Java实现 LeetCode 380 常数时间插入、删除和获取随机元素
    Linux下的iwpriv(iwlist、iwconfig)的简单应用
    OCX控件的注册卸载,以及判断是否注册
    .OCX、.dll文件注册命令Regsvr32的使用
  • 原文地址:https://www.cnblogs.com/zhiji6/p/4446817.html
Copyright © 2011-2022 走看看