Question

我尝试使用Grails 3构建一个显示一些数据库统计信息的gsp。一些统计数据需要花费一些时间来生成。我想要显示占位符＆＃34;请等待＆＃34;在div中，统计数据应该出现。数据可用后，应将这些占位符替换为实际数据。

我希望页面的其余部分是rendert，以便用户不认为页面没有响应。

我试过这样的东西来测试Controller中的功能：

def addMe = {
    sleep(5000)
    render {
        div(id: "bla", "some text inside the div")
    }
}

这就在gsp中：

<g:include action="addMe" />

但页面等待函数完成，直到加载结束。如何跳过等待？

Answer 1

以下内容足以让您大致了解如何实施。

单击按钮后，将调用一个javascript函数，该函数从DbStatsController getStats函数中获取数据。

您应该会看到工作完成时显示的微调器图标，默认情况下会隐藏＆amp;由showSpinner函数显示/隐藏。

错误将显示在id为resultDiv的div中，您的操作结果将返回给JSON。

dbStats\index

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />

    <script type="text/javascript">
        function showSpinner(visible) {
            if (visible) $('#spinner').show();
            else $('#spinner').hide();
        }

        $(document).ready(function(){
            $( '#dbStats' ).click( function() {
                $.ajax( {
                    url: "${g.createLink( controller: 'dbStats', action: 'getStats')}",
                    type: "get",
                    timeout: 5000,
                    success: function ( data ) {
                        $( '#resultDiv' ).html( data )
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $( "#resultDiv" ).addClass( 'alert alert-danger' ).text( 'Unable to get stats ' + errorThrown )
                    },
                    beforeSend: function() { showSpinner( true ) },
                    complete: function() { showSpinner( false ) }
                } );
            })
        });
    </script>
</head>
<body>

<asset:image src="spinner.gif" id="spinner" style="display: none" />

<div id="resultDiv"></div>

<g:form>
    <button type='button' id="dbStats">Get DB stats</button>
</g:form>

</body>

DbStatsController

import grails.converters.JSON

class DbStatsController {

    def index() { }

    def getStats() {
        render ( [stat1: 123, stat2: 321] ) as JSON
    }
}

Grails gsp等待数据显示在div中

1 个答案: