• 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);
    });
    

    继续讨论

    处理 国际化.

  • 相关阅读:
    前端笔记之JavaScript(六)让人头疼的正则表达式
    前端笔记之JavaScript(五)关于数组和字符串那点事
    前端笔记之JavaScript(四)关于函数、作用域、闭包那点事
    前端笔记之JavaScript(三)关于条件判断语句、循环语句那点事
    前端笔记之JavaScript(二)关于运算符&初识条件判断语句
    前端笔记之CSS(下)浮动&BFC&定位&Hack
    前端笔记之CSS(上)语法&文本属性&块/行内元素&选择器&盒模型
    artTemplate--使用artTemplate时,由于json对象属性有数字命名格式 导致调用报错 syntax error
    多线程--做单元测试时,使用线程池发现并没有运行指定代码,直接跳过
    JSP-导入taglib 出现classNotFound异常
  • 原文地址:https://www.cnblogs.com/zhiji6/p/4446817.html
Copyright © 2020-2023  润新知