测试

Grails中使用Ajax

   grails中很好的集成了Ajax,这里介绍利用Jquery的 getJSON方法进行Ajax异步传输。

   使用步骤:

  • 引入Jquery(.gsp 页面中引入 jquery.js)
<script type="text/javascript" src="${resource(dir: 'assets/js', file: 'jquery.js')}"></script>
  • Javascript 脚本中添加Ajax调用方法
   function isProductionNameExist(o) {
       var productName = "test";
       var mode = "test";
           $.getJSON("isProductionNameExist",  // action in controller
                   {productName: productName,  // params pass to action, you can use 'null' when no params
		    mode: mode},
                   function (data) {           // call-back function when ajax call complete
                       alert(data.isExist);
                   });
       }
   }

  

  • Controller中action
  def isProductionNameExist(){
      def productName = params.productName  
def mode = params.mode def status = "Y" def ret = [isExist: status] render ret as JSON }
  • 触发Js函数
<g:textField name="name" onblur="isProductionNameExist(this)"/>

  

    可能存在的问题:

    1. 无法触发controller中action

       params中的id参数会影响, 如下,id属性

       <g:textField id="${xxxInstance.attr}" name="name" onblur="isProductionNameExist(this)"/> 

       另grails自动生成的增删查改页面跳转时会隐式传id,也会导致ajax无法触发action

    2. 乱码

       controller/action中拿到ajax传过去的数据都是乱码,由不同浏览器对于ajax请求不同的处理方式造成。例如:在Ajax调用中,IE总是采用客户端操作系统默认编码,如GB2312,而Firefox总是采用utf-8编码。

        为了避免浏览器对数据进行编码,在数据传送前先用函数对数据进行编码,server拿到数据后再解码。

        例子:

 $.getJSON("isProductionNameExist", 
           {productName: encodeURIComponent(productName)},
          function (data) {
               
          });

  def isProductionNameExist(){
      def productName = params.productName.decodeURL() 
      def status = "Y" 
      def ret = [isExist: status]
      render ret as JSON
  }

  

  
posted @ 2015-04-25 17:28  Genter  阅读(849)  评论(0编辑  收藏  举报

测试