通过 Ajax 在 Grails 中执行控制器功能答案

【问题标题】：Execute controller function in Grails via Ajax通过 Ajax 在 Grails 中执行控制器功能
【发布时间】：2015-06-14 10:57:27
【问题描述】：

我是 Grails 中 ajax 的新手。我想尝试从 ajax 的 gsp-code 执行控制器方法。

这是我的 gsp 代码的一部分：

<g:select
  optionKey="id" name="region.id" id="region" from="${region}" noSelection="[null:' ']"
  onchange="categoryChanged(this.value);"
></g:select>
<div>
  <b>Sub-Category: </b>
  <span id="subContainer"></span>
</div>
                <script>
                    function categoryChanged(regionId) {
                        $.ajax({type:'POST',data:'regionId='+regionId, url:'restorator/region/categoryChanged',success:function(data,textStatus){jQuery('#subContainer').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});
                    }
                </script>

在$ajax调用的url参数中：restorator是一个包，region是其中的一个控制器，categoryChanged是一个动作。

这是我的控制器：

class RegionController {

    def ajaxGetCities = {
        println "hello"
        def region = Region.get(params.id)
        render region?.cities as JSON
    }

    def categoryChanged(long regionId) {
        println "test"
        Region region = Region.get(regionId)
        def subCategories = []
        if ( region != null ) {
            subCategories = City.findAllByRegion(region, [order:'cityName'])
        }
        render g.select(id:'subCategory', name:'subCategory.id',
            from:subCategories, optionKey:'id', noSelection:[null:' ']
        )
    }
}

在头部我添加了<g:javascript library='jquery' /> 当我尝试更改选择标签中的选项时，我看不到控制台的输出，这应该从控制器内的println "test" 行显示。这意味着实际上从未调用过控制器函数，我做错了什么？如何确保此函数调用确实发生？

【问题讨论】：

标签： javascript jquery ajax grails gsp

【解决方案1】：

页面右键，Inspect Element，看看console有没有错误。

另外，您应该这样指定 URL：

url: '${createLink(controller: 'region', action: 'categoryChanged')}',

【讨论】：

【解决方案2】：

如果使用 grails remoteLink 函数，代码会更少。

<g:remoteLink action="makeProduct" id="${productInstance.id}" before="showSpinner('#spinner1')" onComplete="hideSpinner('#spinner1')" update="product_status">Make Product</g:remoteLink>
<div id="product_status"></div>

此代码将异步请求操作并使用操作生成的 HTML 更新 product_status div。您还可以在页面上添加微调器来给用户一些反馈。

【讨论】：