Grails Ajax 实现联动选择

最新推荐文章于 2020-05-16 16:29:29 发布

最新推荐文章于 2020-05-16 16:29:29 发布 · 165 阅读

文章标签：

#Ajax #Grails #Groovy #JavaScript #JSP #ViewUI

Grails 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Grails应用中利用Prototype JavaScript库实现页面元素的异步刷新功能。通过具体示例展示了如何设置JavaScript代码以响应下拉菜单选项的变化，并从服务器获取更新的数据来动态填充另一个下拉菜单。

如果在jsp中添加<g:javascript library="prototype" />再使用g:remoteLink，g:formRemote等可实现异步刷新。
查看生成的html会发现主要实现代码如下

new Ajax.Updater('Bdiv','/Test/test/b', {asynchronous:true,evalScripts:true});return false;

有了这段语句，可以在JavaScript脚本中方便实现异步刷新，而不会仅仅限制在grails提供的几个Tag。

如，欲实现简单的无刷新关联select
a.gsp


<html>
<head>
<title>test</title>
<g:javascript library="prototype" />
<script language="JavaScript">
function sel(){
    var select = document.getElementById("A");
    var index = select.selectedIndex;
    var a = select.options[index].value;
    new Ajax.Updater('Bdiv','/Test/test/b?Aid='+a,
        {asynchronous:true,evalScripts:true});return false;
    }
}
</script>
<body>
<select id="A" onChange="sel();">
<option vaule="1">1</option>
<option vaule="2">2</option>
<option vaule="3">3</option>
</select>
<div id="Bdiv">
</div>
</body>
</html>

b.gsp


<select id="B">
<g:each in="${BB}" var="bInstance">
  <option value="${bInstance.id}">${bInstance.name}</option>
</g:each>
</select>

TestController.groovy


class TestController{
    def index = { redirect(action:a,params:params) }
    def a={[params:params]}
    def b={
        render(action:"b",model:[BB:B.findAllByA(params.Aid)])
    }
}

B.groovy