Grails gsp等待数据以div的形式显示

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

我想让页面的其余部分呈现，因此用户无法认为页面没有响应。

我想是这样的测试功能的控制器：

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

这普惠制内：

<g:include action="addMe" />

但该函数的页面等待完成，直到到底是加载。如何跳过等待？

来源

2017-06-01 uti.devel

你有没有考虑使用Ajax和某种形式的进度条或当前工作的象征？ –

我是新来的。我不知道如何做到这一点。一个进度条会很好，但:)任何工作的例子，你可以指向我？ –

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

点击按钮后，会调用一个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 
    } 
}

来源

2017-06-01 10:49:17

非常感谢！有用：） –

Grails gsp等待数据以div的形式显示

回答

相关问题