Grails gsp 等待数据在 div 中显示答案

【问题标题】：Grails gsp wait for data to display in divsGrails gsp 等待数据在 div 中显示
【发布时间】：2017-11-02 07:59:20
【问题描述】：

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

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

我尝试了这样的方法来测试控制器中的功能：

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

gsp 里面的这个：

<g:include action="addMe" />

但是页面会等待函数完成，直到最后加载。如何跳过等待？

【问题讨论】：

您是否考虑过使用带有某种形式的进度条或当前工作符号的 ajax？
我是新手。我不知道该怎么做。一个进度条会很好:) 你可以指点我的任何工作示例吗？

标签： javascript jquery grails gsp

【解决方案1】：

以下内容应该足以让您大致了解如何实现。

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

您应该会看到在工作完成时显示的微调器图标，该图标默认隐藏并由 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
    }
}

【讨论】：