我尝试使用 Grails 3 构建一个显示一些数据库统计信息的 gsp。一些统计数据需要一些时间才能生成。我想在统计信息应该出现的 div 中显示一个占位符“请稍候”。数据可用后，应将这些占位符替换为实际数据。
我希望页面的其余部分被渲染，这样用户就不会认为页面没有响应。
我尝试了类似的方法来测试 Controller 中的功能:
def addMe = {
sleep(5000)
render {
div(id: "bla", "some text inside the div")
}
}
这在gsp里面:
<g:include action="addMe" />
但是页面等待函数完成，直到最后加载。如何跳过等待？
最佳答案
以下内容应该足以让您大致了解如何实现。
单击按钮后，将调用一个 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>
DbStatsControllerimport grails.converters.JSON
class DbStatsController {
def index() { }
def getStats() {
render ( [stat1: 123, stat2: 321] ) as JSON
}
}
关于javascript - Grails gsp 等待数据在 div 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44302971/