Grails gsp等待数据显示在div中

Question

我尝试使用 Grails 3 构建一个显示一些数据库统计信息的 gsp。一些统计数据需要一些时间才能生成。我想在应该显示统计信息的 div 中显示占位符 "Please wait"。数据可用后，应将这些占位符替换为实际数据。

我希望页面的其余部分呈现出来，这样用户就不会认为页面没有响应。

我试过类似这样的方法来测试控制器中的功能：

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

gsp 中的这个：

<g:include action="addMe" />

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

Answer 1

以下应该足以让您大致了解如何实施。

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

您应该会看到在工作完成时显示的微调器图标，默认情况下它是隐藏的并且 shown/hidden 由 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中

Grails gsp wait for data to display in divs

javascript

jquery

grails

gsp