对控制器的异步调用 - 适用于州和县

Question

In Grails - 我需要创建一个控制器方法来填充州和县下拉表单字段，以便在选择州时，它只会将该州的县填充到县下拉列表中。

一位同事告诉我，这是Grails中的一个异步调用，但我是Grails的新手，我真的不知道这是什么或如何启动一个。 任何帮助将不胜感激。

这是我的代码片段：

目前使用 Grails 2.43。 我有两个域类（州和县），以及两个州和县的选择下拉列表。

表单元素：

<g:select name="locationState" class="form-control" from="${....State.list().sort{it.orderNumber}}">
<g:select name="locationCounty" class="form-control" from="${...State.FindByName(it.orderNumber).counties}">

以下是示例类：

 class State {
        static hasMany = [county:County]
        String name
        String value
        int orderNumber = 0
        static constraints = {
            name nullable:false, maxSize:50, blank:false
            value nullable:false, maxSize:100, blank:false
        }
        String toString(){
            "$value"
        }
        static mapping = {
            table 'state'
            cache: 'read-write'
            columns{
                id column:'id'
                name column:'name'
                value column:'value'
                orderNumber column:'order_number'
            }
            id generator: 'assigned'
        }
    }

    class County {
        State state
        String county
        static constraints = {
            state nullable:false
            county nullable:false, maxSize:100, blank:false
        }
        String toString(){
            "${state.name} - $county"
        }
        static mapping = {
            table 'county'
            cache: 'read-write'
            columns{
                id column:'id'
                county column:'county'
                state column:'state_id'
            }
            id generator: 'assigned'
        }
    }

Answer 1

注释中链接的异步指南用于进行编程异步调用。例如，如果有两个计算成本高昂的方法调用（或需要网络 I/O 的方法调用），则可以使用线程（大致）并行运行它们。Grails提供了许多不同的帮助程序，使这种异步编程变得非常容易。

但是，这不太可能是 GORM 查询所需的内容。您想要填充第二个选择框。您可以通过两种方式完成此操作：在选择状态后重新加载页面，或使用 JavaScript 填充框。我假设你想做后者。Grails确实提供了工具（如<g：remoteFunction>标签）来处理这个问题，而无需编写自己的JavaScript，但Grails AJAX库已被弃用，不建议使用它。

相反，你应该只编写自己的JavaScript。我将向您展示一种使用 jQuery 的技术：

在您看来，初始化两个选择，但第二个应初始化为空。我们还将给他们 ID，以便他们更容易从 jQuery 中进行选择：

<g:select name="locationState"
    class="form-control"
    from="${....State.list().sort{it.orderNumber}}"
    id="location-state" />
<g:select name="locationCounty"
    class="form-control"
    from="${[]}"
    id="location-county" />

然后，我们需要在控制器上公开一个操作，以便在用户选择状态时加载县：

def loadCountiesByState() {
    def state = params.state
    def counties = State.findByValue(state).counties
    render g.select(name: 'locationCounty', class: 'form-control',
            from: counties, id: 'location-county')
}

您应该能够通过将浏览器指向 /app-name/controller-name/loadCountiesByState?state=CA 来测试此部分。我不知道您的数据是如何建模的，因此您可能需要更改State.findByValue(state)部分以满足您的需求。

现在我们只需要用一些 JavaScript 连接控件。确保你包含了jQuery。

<script type="text/javascript">
    $(function() {
        $('#location-sate').change(function() {
            var state = $(this).val();
            $.ajax({
                url: '/app-name/controller-name/loadCountiesByState',
                date: { state: state },
                success: function(data) {
                    $('#location-county').replaceWith(data);
                }
            });
        });
    });
</script>

这会将下拉列表替换为应完全填充县的新选择。