如何在jsp端顯示「Please wait」等加載消息？

Question

基本上我想顯示一個「請稍候」加載消息，而一些進程正在執行。我嘗試了許多分機js，但它不起作用。 在這裏，我把我的jsp代碼以及js代碼。

這是我的JS文件。

exportIFrame = document.createElement('iframe'); 
           exportIFrame.src = "about:blank"; 
           exportIFrame.width = "2px"; 
           exportIFrame.height = "2px"; 
           exportIFrame.style.border = 0; 
           exportIFrame.id = "loginFrame"; 
           exportIFrame.name = "loginFrame"; 

           document.body.appendChild(exportIFrame); 

           var idocument = exportIFrame.contentWindow.document; 

           loginForm = idocument.createElement("form"); 
           loginForm.setAttribute("target", "loginFrame"); 
           loginForm.setAttribute("method","Post"); 
           loginForm.setAttribute("action","./DeliveryTech/services/GenericExportGridDataToExcel.jsp"); 

           var hiddenFieldsearchConditions = idocument.createElement("input"); 
           hiddenFieldsearchConditions.setAttribute('type',"hidden"); 
           hiddenFieldsearchConditions.setAttribute('name',"searchConditions"); 
           hiddenFieldsearchConditions.setAttribute('value',searchConditions); 
           loginForm.appendChild(hiddenFieldsearchConditions); 

           var hiddenFieldGridName = idocument.createElement("input"); 
           hiddenFieldGridName.setAttribute('type',"hidden"); 
           hiddenFieldGridName.setAttribute('name',"gridName"); 
           hiddenFieldGridName.setAttribute('value',gridName); 
           loginForm.appendChild(hiddenFieldGridName); 

           var hiddenFieldVisibleColumn = idocument.createElement("input"); 
           hiddenFieldVisibleColumn.setAttribute('type',"hidden"); 
           hiddenFieldVisibleColumn.setAttribute('name',"visibleColumn"); 
           hiddenFieldVisibleColumn.setAttribute('value',Ext.util.JSON.encode(visibleColumn)); 
           loginForm.appendChild(hiddenFieldVisibleColumn); 

           var hiddenFieldFROM = idocument.createElement("input"); 
           hiddenFieldFROM.setAttribute('type',"hidden"); 
           hiddenFieldFROM.setAttribute('name',"pagefrom"); 
           hiddenFieldFROM.setAttribute('value',pageFrom); 
           loginForm.appendChild(hiddenFieldFROM); 

           var hiddenFieldTO = idocument.createElement("input"); 
           hiddenFieldTO.setAttribute('type',"hidden"); 
           hiddenFieldTO.setAttribute('name',"pageto"); 
           hiddenFieldTO.setAttribute('value',pageTo); 
           loginForm.appendChild(hiddenFieldTO); 

           exportIFrame.appendChild(loginForm); 
           loginForm.submit(); 

這是我的JSP文件。

<% 
%> 
<script language="javascript"> 
loadMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
loadMask.show(); 
</script> 
<% 
CommonLogger.getLogger().info("\n\nGenericExportGridDataToExcel.jsp: [START]"); 
String userId = ""; 
if(null!=bizSite && null!=bizSite.getCurrentUser()){ 
    userId = bizSite.getCurrentUser(); 
    CommonLogger.getLogger().info("\nGenericExportGridDataToExcel.jsp: userId:"+userId); 
} else { 
    CommonLogger.getLogger().info("\nSession is Expired:"); 
} 
//Block for User permissions on and Owning offices 
JSONObject userPermissions = null; 
JSONArray userPermissionsArr = null; 
List<String> userAllowDashboards = new ArrayList<String>(); 
GlobalOrderEntryService globalOrderEntryService = new GlobalOrderEntryServiceImpl(); 
if(null == session.getAttribute("SDIUserDashOwningOffices")) { 
    userPermissions = globalOrderEntryService.getUserPermissionAccessLevel(userId).getJSONObject("data"); 
    session.setAttribute("SDIUserDashOwningOffices", userPermissions); 
    Iterator<?> userPermissionsKeys = userPermissions.keys(); 
    while(userPermissionsKeys.hasNext()){ 
     String userPermKey = (String)userPermissionsKeys.next(); 
     userAllowDashboards.add(Constants.DASHBOARD_NAMES_MAP.get(userPermKey)); 
    } 
    session.setAttribute("SDIUserDashboards", userAllowDashboards); 
} else { 
    userPermissions = JSONObject.fromObject(session.getAttribute("SDIUserDashOwningOffices")); 
    userAllowDashboards = JSONArray.fromObject(session.getAttribute("SDIUserDashboards")); 
} 
String owningOffices=""; 
Object ownOffcObj = userPermissions.get(Constants.DELIVERY_TECHNICIANS_PERMISSION_STR); 
if(null != ownOffcObj) { 
    owningOffices = ownOffcObj.toString(); 
    owningOffices = owningOffices.replaceAll("\\[","").replaceAll("\\]","").replaceAll(", ", ",").replaceAll("\"",""); 
} 
//Block for User permissions on and Owning offices 

Boolean totalRecordLimitExceed = false; 
int pageFrom =0,pageTO=0,firstResult=1,maxResult=1; 
DateFormat format = new SimpleDateFormat("dd-MM-yyyy"); 
String timeStamp = format.format(new Date()); 
//SearchFilterParser filterParser = new SearchFilterParserImpl(); 
//String searchConditions = request.getParameter("searchConditions"); 
Properties subtitleProperties = null; 
subtitleProperties = new Properties(); 
ClassLoader cl = Config.class.getClassLoader(); 
subtitleProperties.load(cl.getResourceAsStream("Subtitling.properties")); 

int perPageLimit = Integer.parseInt(subtitleProperties.getProperty(Constants.DELIVERY_TECH_EXPORT_TO_EXCEL_PAGE_LIMIT)); 
int totalRecordLimit = Integer.parseInt(subtitleProperties.getProperty(Constants.DELIVERY_TECH_EXPORT_TO_EXCEL_DATA_LIMIT)); 

String gridName = ""; 
if(null!=request.getParameter("gridName")) 
    gridName = request.getParameter("gridName"); 
if(null!=request.getParameter("pagefrom")) 
    pageFrom = Integer.parseInt(request.getParameter("pagefrom")); 
if(null!=request.getParameter("pageto")) 
    pageTO = Integer.parseInt(request.getParameter("pageto")); 

LinkedHashMap<String,String> visibleColumnMap = new LinkedHashMap<String,String>(); 
JSONArray visibleColumns = null; 
JSONObject columnObj = null; 
if(null!=request.getParameter("visibleColumn")){ 
    visibleColumns = JSONArray.fromObject(request.getParameter("visibleColumn")); 
    for(int index = 0;index < visibleColumns.size();index++){ 
     columnObj = visibleColumns.getJSONObject(index); 
     visibleColumnMap.put(columnObj.getString("dataindex"),columnObj.getString("header")); 
    } 
} 

String excelName = null; 
Map<String,Object> map = null; 
Map<String,Object> searchMap = null; 
GridParams gridParams = null; 
Map<String,Object> eqSearchConditions = null; 
Map<String,Object> neSearchConditions = null; 
String searchFor; 
try { 
    CommonLogger.getLogger().info("\nGenericExportGridDataToExcel.jsp: perPageLimit:"+perPageLimit +"\t totalRecordLimit:"+totalRecordLimit); 
    CommonLogger.getLogger().info("\nGenericExportGridDataToExcel.jsp: pageFrom:"+pageFrom +"\t pageTO:"+pageTO); 
    if(pageFrom !=0 && pageTO != 0){ 
     firstResult=pageFrom; 
     if(pageFrom == pageTO){ 
      maxResult = perPageLimit; 
     }else if(pageTO > pageFrom){ 
      maxResult = (((pageTO - pageFrom) +1)* perPageLimit); 
     } 
     if(maxResult>totalRecordLimit){ 
      totalRecordLimitExceed =true; 
     } 
    }else if(pageTO != 0){ 
     firstResult=pageFrom; 
     maxResult = pageTO; 
    } 
    CommonLogger.getLogger().info("\nGenericExportGridDataToExcel.jsp: firstResult:"+firstResult +"\t maxResult:"+maxResult); 
    if(!totalRecordLimitExceed){ 
     Map<String,Object> map1 = new HashMap<String,Object>(); 
     map1.put(Constants.GRID_PARAMS_OBJECT_KEY,gridParams); 
     HashMap<String,Object> searchConditions = new HashMap<String,Object>(); 

     final String searchCondition; 

     searchCondition=request.getParameter("searchConditions"); 
     JSONArray searchConditionJSONArray = JSONArray.fromObject(request.getParameter("searchConditions")); 
     JSONObject searchConditionJSONObject = null; 

     map1.put(Constants.EQ_SEARCH_PARAMS_MAP_KEY,new HashMap<String,Object>(){{put("searchConditions",searchCondition);}}); 
     if(map!=null){ 
      gridParams = (map.get(Constants.GRID_PARAMS_OBJECT_KEY)!=null?((GridParams)map.get(Constants.GRID_PARAMS_OBJECT_KEY)):null); 
      eqSearchConditions = (map.get(Constants.EQ_SEARCH_PARAMS_MAP_KEY)!=null?(Map<String, Object>)map.get(Constants.EQ_SEARCH_PARAMS_MAP_KEY):null); 
      neSearchConditions = (map.get(Constants.NE_SEARCH_PARAMS_MAP_KEY)!=null?(Map<String, Object>)map.get(Constants.NE_SEARCH_PARAMS_MAP_KEY):null); 
     } 
     HSSFWorkbook wb = new HSSFWorkbook(); 
     if(gridName!=null) { 
      DeliveryTechServiceImpl deliveryTechDefaultService = new DeliveryTechServiceImpl(); 
      if(Constants.DELIVERY_TECH_DEFAULTVIEW_GRIDNAME.equals(gridName)) { 
       wb = deliveryTechDefaultService.exportToExcelDefaultView(map1,visibleColumnMap,"Default",owningOffices,firstResult,maxResult); 
       excelName = Constants.DELIVERY_TECH_DEFAULTVIEW_EXCELNAME; 
      }else if(Constants.DELIVERY_TECH_PLANINGVIEW_GRIDNAME.equals(gridName)) { 
       wb = deliveryTechDefaultService.exportToExcelDefaultView(map1,visibleColumnMap,"Planing",owningOffices,firstResult,maxResult); 
       excelName = Constants.DELIVERY_TECH_PLANINGVIEW_EXCELNAME; 
      } 
     } 
     response.setContentType("application/vnd.ms-excel"); 
     response.setHeader("Expires:", "0"); // eliminates browser caching 
     response.setHeader("Content-Disposition", "attachment; filename="+excelName+"_"+timeStamp+".xls"); 

     wb.write(response.getOutputStream()); 
     response.getOutputStream().flush(); 
     response.getOutputStream().close(); 
    }else{ 
     %> 
      <script language="javascript"> 
       loadMask.hide(); 
       alert("Total record limit exceeded. Please enter valid page length."); 
      </script> 
     <% 
    } 
    %> 
    <script language="javascript"> 
     loadMask.hide(); 
    </script> 
    <% 
    CommonLogger.getLogger().info("\n\nGenericExportGridDataToExcel.jsp: [END]"); 
} catch (Exception ex) { 
    %> 
    <script language="javascript"> 
     loadMask.hide(); 
    </script> 
    <% 
    CommonLogger.getLogger().info("\n\n Error in GenericExportGridDataToExcel.jsp"+ExceptionUtils.getFullStackTrace(ex)); 
    //e.printStackTrace(); 
} 
    %> 

請專注<script>標籤不完整JSP代碼。

Answer 1

做一些閱讀AJAX。我想不出採用基於本地JSP的方式來做到這一點的其他方式。

一般的想法是，您將使用AJAX調用需要一段時間的進程，並在調用執行時呈現「請稍候」消息。調用完成後，您可以渲染輸出。

編輯 - 關注<script>標記讓我想到（如果這是一項任務），您應該使用AJAX調用來完成此操作。

Answer 2

如果我理解你的問題，我在使用jQuery/Ajax之前做了類似的事情。

我implementated這樣：

JSP：

<div id="loading" style="background:url('<c:url value="path to your gif img"/>')50% 50% no-repeat rgb(249,249,249)"> 
    <label class="loading-msg">Please wait....</label> 
</div> 

在JS：

function beforeProcess() { 
    $('#loading').show(); 
}); 

function afterProcess() { 
    $('#loading').fadeOut(3000); 
}); 

你的CSS：

#loading { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
} 

我不知道，但你可以調用這些功能在這個過程之前當過程完成（成功或失敗）時，您可以隱藏/淡出元素。

Answer 3

我可以看到你使用extjs。如果是這樣，你可以隨時使用

Ext.getCmp('yourelementid').setLoading(true);開始

和

Ext.getCmp('yourelementid').setLoading(false);停止

以上將是方便的，如果你的ExtJS的佈局和運行。但是如果你想在你的jsp頁面加載時顯示加載掩碼，那是另一回事。如果這是你的情況做如下：

這是JSP文件中的HTML：

<body> <div id="loading-mask"></div> <div id="loading"> <div class="loading-indicator"> Loading .... </div>
</div> </body>

這是你的CSS：

#loading-mask { 
    position: absolute; 
    left:  0; 
    top:  0; 
    width: 100%; 
    height: 100%; 
    z-index: 20000; 
    background-color: white; 
} 

#loading { 
    position: absolute; 
    left:  50%; 
    top:  50%; 
    padding: 2px; 
    z-index: 20001; 
    height: auto; 
    margin: -35px 0 0 -30px; 
} 

#loading .loading-indicator { 
    background: url(images/extanim32.gif) no-repeat; //just replace with an animated gif 
    color:  #555; 
    font:  bold 13px tahoma,arial,helvetica; 
    padding: 8px 42px; 
    margin:  0; 
    text-align: center; 
    height:  auto; 
} 

最後是你的JS：

Ext.onReady(function() { 
      setTimeout(function(){ 
       Ext.get('loading').fadeOut({ 
       remove:true, 
       easing: 'easeOut', 
       duration: 2000 
       }); 
       Ext.get('loading-mask').fadeOut({ 
       remove:true, 
       easing: 'easeOut', 
       duration: 2000 
       }); 
      }, 250); 
});