Javascript 在视图中动态更改GSP模板_Javascript_Jquery_Grails

Javascript 在视图中动态更改GSP模板

javascript jquery grails

Javascript 在视图中动态更改GSP模板,javascript,jquery,grails,Javascript,Jquery,Grails,我想根据在选择组件中选择的值刷新模板通常，我想在视图中加载3个模板： _templateA.gsp _模板B.gsp _templateC.gsp 在我的GSP视图中，我有一个包含3个选项的select组件： A B C 如何动态更改代码中加载的模板： <g:render template="*myTemplate*"/> 在select组件的onChange事件上？（如果我选择“A”，则加载templateA，如果我选择“B”，则删除templateA并加载temp

我想根据在选择组件中选择的值刷新模板

通常，我想在视图中加载3个模板：

_templateA.gsp
_模板B.gsp
_templateC.gsp

在我的GSP视图中，我有一个包含3个选项的select组件：

如何动态更改代码中加载的模板：

<g:render template="*myTemplate*"/>

在select组件的onChange事件上？（如果我选择“A”，则加载templateA，如果我选择“B”，则删除templateA并加载templateB）

在下面的示例中，我们使用serialize将表单内容发布到

/myController/myAction

操作

然后根据所选选项，我们呈现适当的模板，并更新视图中的

myDiv

div

普惠制：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    $( document ).ready( function() {
        $( '#mySelect' ).on( 'change' , function (event) {
            $.ajax({
                url: "/myController/myAction",
                type: "POST",
                data: $( '#myForm' ).serialize(),
                success: function ( data ) {
                    $( '#myDiv' ).html( data );
                },
                error: function( j, status, eThrown ) { console.log( 'Error ' + eThrown ) }
            });
        });
    });
</script>
</head>
<body>
<g:form name="myForm">
    <g:select name="mySelect" from="${['A', 'B', 'C']}" />
</g:form>

<div id="myDiv"></div>
</body>
</html>

def myAction() {
    render template: "template${params.mySelect}"
}