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
  }