首页 > 技术文章 > jsp页面访问数据库根据数据情况,定时弹出提醒

hyiam 2017-11-29 13:45 原文

需求:根据数据库情况,在页面定时弹出相应的消息

实现:

  1. 展示DIV设置

<script language="javascript" type="text/javascript" src="${ctx}/ui/js/jquery-1.3.2.js" > </script>
<style> 
div{padding-right:5px;
    padding-top:5px;
}
#note{position:absolute;width:300px;height:150px;padding:20px;background:#eee;border:1px solid #ccc;left:72%;z-index:9999;display:none;} 
</style> 
<link rel="stylesheet" href="${ctx}/sdc/ext/finance/finance/ui/home/themes/default/css/list.css" type="text/css">
<link rel="stylesheet" href="${ctx}/sdc/ext/finance/finance/ui/home/themes/default/css/template.css" type="text/css">
<div id="note" style="padding-left:5px;padding-right:5px;padding-top:5px;background:url(${ctx}/sdc/ext/finance/finance/ui/home/themes/default/img/tz.gif) repeat-x;">
<div style="height: 20px;">
<table width="98%" align="center" border="0">
<tr style="width: 100%">
<td align="left"><b>消息提醒</b></td>
<td align="right"><a onClick="closeMsg()">关闭</a><img id="closeBtn" src="${ctx}/sdc/ext/finance/finance/ui/home/themes/default/img/close.png" alt="关闭" onClick="closeMsg()" /></td>
</tr>
</table>
</div>
<div id="showInfo" style="width: 300px;height: 160px;">
</div>
</div>     

  2. js调用ajax,确定页面是否弹出。

  2.1  使用window.setInterval(参数1,参数2),设置定时器,参数1为调用的方法,参数2为调用间隔时间,单位为毫秒

  2.2  window.clearInterval(interval);可以清除设置的定时器,interval为方法参数

var num = 10;
var showCount = 3;
var currCount = 0;
var lClientID = document.getElementById('agencyName').value;
var interval = window.setInterval(showMsgIcon, 1000*num); 
function showMsgIcon(){
    if(currCount-showCount==0){
        window.clearInterval(interval);
    }
    if(!$('#note').is(':visible')){ 
    $.ajax({
               type: "POST", 
               url: "${ctx}/QueryTodoTaskServlet", 
               data: "agencyId="+lClientID+"&userId=<%=userInfo.getUserId()%>", 
               success: function(returnValue){
                    
                    if(returnValue!="")
                    {
                        currCount ++;
                        //var msgPicFadeOutIn = setInterval(function(){
                        var divshow = $("#showInfo");
                        divshow.text("");// 清空数据
                        var currencyArray = returnValue.split("#");
                        for(var i=0;i<currencyArray.length-1;i++)
                        {
                            var currency = currencyArray[i].split(",");
                            var curName = currency[0];
                            var curCount = currency[1];
                            
                            var urlEbank = "http://10.28.53.226:9085/ebankDraft/draft/query/transactionflowquery/transactionFlowQuery.jsp?funcid=000010000500003359370361203264&isOp=0&MGHessianURL=http://127.0.0.1:9085/toftmerge/MGHessianServlet&MGAppName=toftmerge&MGIntSysId=00000000000000000587557608475672&RLOGINPATH=ebank_session_outdate&UnitId=<%=unitId%>&SDCsessionId=<%=request.getSession().getId() + userInfo.getUuid()%>&module_id=359370361203264&lClientID="+lClientID;
                            if(i==0){
                                divshow.append(curName+'结算菜单<a onclick ="clickB()">'+curCount+'</a>条');
                            }else{
                                divshow.append("<br/>"+curName+'结算菜单<a onclick ="clickB()">'+curCount+'</a>条');
                            }
                            divshow.append("<br/>银企菜单<a onclick ='clickA()' >200</a>条"); // 添加Html内容,不能用Text 或 Val
                            divshow.append("<br/>电票菜单<a onclick='clickC()'>300</a>条");
                            divshow.append("<br/>纸票菜单<a onclick='clickD()'>400</a>条");
                        }
                        if(!$('#note').is(':visible')){ 
                            $('#note').css({display:'block', top:(sheight-50)}).animate({top: (sheight - 200)}, 500); 
                        } 
                        // }, 10000);
                    }else{
                        //sheight = $(window).height()
                        //$('#note').css({'top':(sheight - 210)});
                    }
                }
        });
    }
    
}
function clickB(){
    selectModule1(1);
    var main = document.getElementById('main');
    main.src="http://<%=localHost1%>:<%=localPort1%>/NASApp/iTreasury-settlement/settlement/tran/current/view/v021.jsp";
    // window.showModalDialog("http://10.28.53.226:9085/NASApp/iTreasury-settlement/settlement/tran/current/view/v021.jsp","", "dialogWidth=800px;dialogHeight=450px");
}
function clickA(){
    //var tree = document.getElementById('tree');
    //tree.src = "http://<%=localHost1%>:<%=localPort1%>/toftmerge/finance/getModule.do?currencyId=1&RLOGINPATH=finance_session_outdate&unitId=1&random=" + new Date().getTime();
    selectModule1(12);
    // flushMain();
    // alert(1);
    var main = document.getElementById('main');
    main.src="http://<%=localHost1%>:<%=localPort1%>/NASApp/iTreasury-bankportal/bankinterface/view/v001.jsp?funcid=12000040000112&isOp=1&MGHessianURL=<%=MGHessianURL%>&MGAppName=toftmerge&MGIntSysId=1001&RLOGINPATH=finance_session_outdate&UnitId=<%=unitId%>&SDCsessionId=<%=request.getSession().getId() + userInfo.getUuid()%>&module_id=12";
    // window.showModalDialog("http://10.28.53.226:9085/NASApp/iTreasury-bankportal/bankinterface/view/v001.jsp?funcid=12000040000112&isOp=1&MGHessianURL=http://127.0.0.1:9085/toftmerge/MGHessianServlet&MGAppName=toftmerge&MGIntSysId=1001&RLOGINPATH=finance_session_outdate&UnitId=<%=unitId%>&SDCsessionId=<%=request.getSession().getId() + userInfo.getUuid()%>&module_id=12","", "dialogWidth=800px;dialogHeight=450px");
}
function clickC(){
    selectModule1(404291396468369);
    var main = document.getElementById('main');
    main.src="http://<%=localHost1%>:<%=localPort1%>/NASApp/DraftManage-finance/draftQuery/draftOperationProcessQuery/v001.jsp?funcid=000010000500004404291396468369&isOp=0&MGHessianURL=<%=MGHessianURL%>&MGAppName=toftmerge&MGIntSysId=00000000000000000404291396468383&RLOGINPATH=finance_session_outdate&UnitId=<%=unitId%>&SDCsessionId=<%=request.getSession().getId() + userInfo.getUuid()%>&module_id=404291396468369";

    // window.showModalDialog("http://10.28.53.226:9085/NASApp/DraftManage-finance/draftQuery/draftOperationProcessQuery/v001.jsp?funcid=000010000500004404291396468369&isOp=0&MGHessianURL=http://127.0.0.1:9085/toftmerge/MGHessianServlet&MGAppName=toftmerge&MGIntSysId=00000000000000000404291396468383&RLOGINPATH=finance_session_outdate&UnitId=<%=unitId%>&SDCsessionId=<%=request.getSession().getId() + userInfo.getUuid()%>&module_id=404291396468369","", "dialogWidth=800px;dialogHeight=450px");
}
function clickD(){
    selectModule1(898586663909326);
    var main = document.getElementById('main');
    main.src="http://<%=localHost1%>:<%=localPort1%>/financeDraft/draft/query/transactionflowquery/transactionFlowQuery.jsp?funcid=000010000600004898586663909326&isOp=0&MGHessianURL=<%=MGHessianURL%>&MGAppName=toftmerge&MGIntSysId=00000000000000000898586663909324&RLOGINPATH=finance_session_outdate&UnitId=<%=unitId%>&SDCsessionId=<%=request.getSession().getId() + userInfo.getUuid()%>&module_id=898586663909326";

    // window.showModalDialog("http://10.28.53.226:9085/financeDraft/draft/query/transactionflowquery/transactionFlowQuery.jsp?funcid=000010000600004898586663909326&isOp=0&MGHessianURL=http://127.0.0.1:9085/toftmerge/MGHessianServlet&MGAppName=toftmerge&MGIntSysId=00000000000000000898586663909324&RLOGINPATH=finance_session_outdate&UnitId=<%=unitId%>&SDCsessionId=<%=request.getSession().getId() + userInfo.getUuid()%>&module_id=898586663909326","", "dialogWidth=800px;dialogHeight=450px");
}
function out(){ 
    $('#note').animate({top:(sheight-50)}, 500, function(){ 
        $(this).css({display:'none', top:'-100px'}); 
    }); 
}

 后台:

servlet

package com.iss.sdc.ext.finance.finance.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.iss.sdc.ext.finance.finance.util.TodoTaskUtils;
import com.toft.core2.ToftException;

public class QueryTodoTaskServlet extends HttpServlet{
    
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
    {
        doPost(req, resp);
    }
    
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
           String temp = "";
           String agencyId = "";
           String userId = "";
           String returnValue = "";
           String currencyId = "";
           String name = "";
           temp = req.getParameter("agencyId");
           if ((temp != null) && (temp.trim().length() > 0))
           {
             agencyId = temp;
           }
           temp = req.getParameter("userId");
           if ((temp != null) && (temp.trim().length() > 0))
           {
             userId = temp;
           }
     
           TodoTaskUtils todoTaskUtils = new TodoTaskUtils();
           Map map = new HashMap();
           List list = todoTaskUtils.queryTodoTaskList(userId, agencyId);
           Iterator it = list.iterator();
           while (it.hasNext())
           {
               map = (HashMap)it.next();
               currencyId = (String)map.get("COUNT");
               name = (String)map.get("NAME");
               returnValue = returnValue + name + "," + currencyId + "#";
           }
           System.out.println("returnValue========"+returnValue);
           resp.setContentType("text/html;charset=UTF-8");
           resp.setHeader("Cache-Control", "no-cache");
           PrintWriter out = resp.getWriter();
           out.print(returnValue);
           out.flush();
           out.close();
        }catch (ToftException e) {
            e.printStackTrace();
        }
    }
}

web.xml

        <servlet>
        <servlet-name>QueryTodoTaskServlet</servlet-name>
        <servlet-class>com.iss.sdc.ext.finance.finance.servlet.QueryTodoTaskServlet</servlet-class>
    </servlet>
        <servlet-mapping>
        <servlet-name>QueryTodoTaskServlet</servlet-name>
        <url-pattern>/QueryTodoTaskServlet</url-pattern>
    </servlet-mapping>

 

推荐阅读