11.在play框架里使用Ajax

11.在play框架里使用Ajax

play框架允许你很容易执行ajax请求， 它默认使用jQuery作为实现。本节我们将描述如何在框架里有效使用jQuery。

play框架同时带来了方便的jsAction标签，用于透明地从控制器得到方法定义。

通过jsAction标签使用jQuery

#{jsAction /}标签返回一个JavaScript函数，它包含了基于服务器动作的URL和可用的变量。它不能执行AJAX请求，这些都必须使用返回的URL通过手工进行处理。

示例：

GET    /hotels/list        Hotels.list

现在就可以导入这些路由客户端：

<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>

在这个示例里，我们从默认的Application控制器里请求方法列表。同时传递了三个参数： search,size和page。我们执行的请求操作之后被存入listAction变量。现在就可以使用jQuery和load函数了。

事实上，下面的请求会被发送：

GET /hotels/list?search=x&size=10&page=1

在这种情况下，这个请求将返回HTML数据。

然后，也可使用jQuery对数据进行整理后返回JSON或XML。在控制器里，使用适当的render方法(renderJSON, renderXML或XML模板)

参考jQuery文档可获取更多信息。

请注意，我们也可执行POST，对应的jQuery方法应该调整为：

$.post(listAction(), function(data) {

 $('#result').html(data);

});

 

 

调用方式一：

 

$.ajax({

        url:"@{front.account.LoginAndRegisterAction.loginAjax()}",

        type:"POST",

        data: {

                "name":name,

                "pwd":pwd

                },

        async:false,

        dataType:'json',

        beforeSend:function(){

                },

        success:function(data) {

                if(data.code == -1) {

                    $("#login_mobileMsg").html("<iclass='registerErrorIcon_login'></i>" + data.msg);

                    $("#login_pwdMsg").html("");

                    bCode= -1;

                }else if(data.code == -2){

                    $("#login_pwdMsg").html("<iclass='registerErrorIcon_login'></i>" + data.msg);

                    $("#login_mobileMsg").html("");

                    bCode = -1;

                 } else {

                    if(data.code== -3){

                    isHf = true;//有汇付账户

                 }

                 $("#login_mobileMsg").html("");

                 $("#login_pwdMsg").html("");

                 bCode = 0;

                }

        }

});

 

 

调用方式二：

 

var checkPassword = #{jsAction@front.invest.investAction.checkInvestPassword(':sign', ':investPassword')/};

 

// 检查密码

$.get(checkPassword({sign:'${bid.sign}',investPassword:password}), function(data) {

        if(data.code >= 0) {

               $("#errorPasswordMsg").html("");

               confirmInvest();

        } else {

                $("#errorPasswordMsg").html(data.returnMsg);

               }

});