ajax 每10秒呼叫一次介面
阿新 • • 發佈：2018-12-31
<%@ page language="java" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <base href="<%=basePath%>"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="images/github.ico"> <link href="css/common.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/sweetalert.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/sweetalert.min.js"></script> <script src="js/common.js"></script> <title>測試資料</title> </head> <body> <div class="container"> <div class="col-lg-12 "> <h3 contenteditable="true" class="text-center">呼叫結果頁</h3> </div> <br/> <br/> <br/> <c:forEach items="${factoryResultList}" var="list" varStatus="count"> <div class="form-group"> <label class="col-sm-2 control-label">${list.name}</label> <div class="col-sm-2"> <span id="span${list.seq}" class="glyphicon glyphicon-refresh" >等待建立中...</span> </div> <br/> <div style="width:35%" id="result${list.seq}"> </div> </div> </c:forEach> <div class="col-lg-12 "> <div class="row"> <div class="col-lg-12 "> <button class="btn btn-primary " type="button" onclick="window.location.href='www.baidu.com'"> <span class="glyphicon glyphicon-home"></span> 返回到首頁</button> <input type="hidden" id="int" value="int"> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> var url="<%=path %>/parameter/getDatainfo.do"; var sessionId="${datasession}"; var int=self.setInterval("clock(url,sessionId)",8000); document.getElementById("int").value=int </script>
document.write("<script language=javascript src='js/sweetalert.min.js'></script>");
function clock(url,sessionId)
{
$.ajax({
type: "POST",
url: url,
dataType: 'json',
data:{
sessionId:sessionId
},
success: function (data) {
var result = JSON.parse(data)
for (var i = 0; i < result.factoryResultList.length; i++) {
if (result.factoryResultList[i].status == 'init') {
$('#span' + i).attr("class", "glyphicon glyphicon-refresh");
$('#span' + i).attr("style", "color:gray");
$('#span' + i).text("初始化中...");
} else if (result.factoryResultList[i].status == 'processing') {
$('#span' + i).attr("class", "glyphicon glyphicon-refresh");
$('#span' + i).attr("style", "color:gray");
$('#span' + i).text("呼叫建立中...");
} else if (result.factoryResultList[i].status == 'finished') {
if (result.factoryResultList[i].retCode == '00') {
$('#span' + i).attr("class", "glyphicon glyphicon-ok");
$('#span' + i).attr("style", "color:forestgreen");
$('#span' + i).text("生成成功");
if (result.factoryResultList[i].dataObject != null) {
var html = " <table class=\"table table-bordered table-striped table-hover \">\n" +
"<tbody>";
$.each(result.factoryResultList[i].dataObject, function (key, value) {
html += " <tr>\n" +
" <td align=\"left\">" + key + "</td>\n" +
" <td align=\"left\">" + value + "</td>\n" +
" </tr>";
});
html += "</tbody>\n" +
"</table>";
$('#result'+i).html(html);
} else {
$('#result' + i).attr("class", "alert alert-success");
$('#result'+i).text(result.factoryResultList[i].message);
}
} else {
$('#span' + i).attr("class", "glyphicon glyphicon-remove");
$('#span' + i).attr("style", "color:red");
$('#span' + i).text("生成失敗");
$('#result' + i).attr("class", "alert alert-danger");
$('#result' + i).text(result.factoryResultList[i].message);
}
}
}
if (result.status =='finished') {
if(result.retCode=='00'){
if(document.getElementById("int").value=="int"){
sleep(3000);
}
window.clearInterval(document.getElementById("int").value);
}else {
sweetAlert("整體呼叫失敗，請重新觸發！", "","error");
window.clearInterval(document.getElementById("int").value);
}
}
}});
}
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}