当前位置： 代码迷 >> JavaScript >> jsp施用ajax
  详细解决方案

jsp施用ajax

热度：375   发布时间：2013-03-25 15:43:04.0
jsp使用ajax
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String contextPath = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+contextPath ;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="<%=basePath%>/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="<%=basePath%>/js/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="<%=basePath%>/js/SpryAccordion.js" type="text/javascript"></script>

       
<style type="text/css">

@CHARSET "UTF-8";
td {
background: transparent;
}

#toDoList {
width: 688px;
background: #d8e7ef;
border: #fff 1px solid;
padding: 0px;
margin: 0;
}

#toDoList table td {
padding-left: 40px;
font-family: "微软雅黑", "黑体", "宋体";
font-size: 14px;
color: #000;
text-decoration: none;
}

#toDoList td a {
font-family: "微软雅黑", "黑体", "宋体";
font-size: 14px;
color: #000;
text-decoration: none;
}

#toDoList td a:hover {
color: #f00;
text-decoration: underline;
}

.PanelTabCute {
margin: 0px;
padding: 2px 2px 2px 20px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: "微软雅黑", "黑体", "宋体";
color: #2d7094;
font-size: 12px;
}

.PanelTabCute span {
color: #f00;
}

.numMoreZero {
color: #f00;
font-size: 18px;
font-weight: bold;
}

.PanelTabMore {
font-family: "微软雅黑", "黑体", "宋体";
font-size: 12px;
}

.PanelTabMore a {
color: #000;
text-decoration: none;
}

.PanelTabMore a:hover {
color: #f00;
text-decoration: underline;
}

.PanelContentDiv {
width: 678px;
height: 200px;
background: url('<%=basePath%>/images/filesback2.png');
padding-top: 0px;
}

.Accordion {
overflow: hidden;
border-bottom: 1px #63b6ea solid;
width: 678px;
}

.AccordionPanel {
margin: 0px;
padding: 0px;
}


.AccordionPanelTab {
background: url('<%=basePath%>/images/filesback.png');
margin: 0px;
padding: 2px 2px 2px 20px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: "微软雅黑", "黑体", "宋体";
color: #2d7094;
font-size: 12px;
}

.AccordionPanelTab span {
color: #f00;
}

.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0;
height: 160px;
background: url('<%=basePath%>/images/filesback.png') 0 -22px;
}
.AccordionPanelContent2 {
overflow: auto;
margin: 0px;
padding: 0;
height: 201px;
background: url('<%=basePath%>/images/filesback.png') 0 -22px;
}
.AccordionPanelOpen .AccordionPanelTab {
background: url('<%=basePath%>/images/filesback.png');
}

.AccordionPanelTabHover {
color: #555555;
}

.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}

.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;
}

@media print {
.Accordion {
overflow: visible !important;
}
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
}
}

.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
/* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 0 10px;
margin: 0px 1px 0px 0px;
font-family: "微软雅黑", "黑体", "宋体";
font-size: 12px;
font-weight: bold;
background: url('<%=basePath%>/images/tab.png');
list-style: none;
border-left: solid 1px #408eb5;
border-bottom: solid 1px #408eb5;
border-top: solid 1px #408eb5;
border-right: solid 1px #408eb5;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
height: 25px;
line-height: 25px;
}

.TabbedPanelsTabHover {
background-color: #CCC;
}

.TabbedPanelsTabSelected {
background: url('<%=basePath%>/images/tab-s.png');
border-bottom: 1px solid #d8e7ef;
}

.TabbedPanelsTab a {
color: black;
text-decoration: none;
}

.TabbedPanelsContentGroup {
clear: both;
border-top: solid 1px #408eb5;
}

.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
height: 255px;
}

.TabbedPanelsContentVisible {

}

.VTabbedPanels {
overflow: hidden;

}

.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}

.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}

.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}

.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}

@media print {
.TabbedPanels {
overflow: visible !important;
}
.Group {
display: block !important;
overflow: visible !important;
height: auto !important;
}
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear: both !important;
}
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear: both !important;
}
}
</style>
<script type="text/javascript">
    var servletUrl = "<%=basePath%>/servlet/TodoServlet";
    var userId="<%=request.getParameter("portalUserId")%>";
var imgHtml = "<img src='<%=basePath%>/images/listimg.gif' width='16' height='14' align='absmiddle'/> ";

$(document).ready(function(){
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var Accordion2 = new Spry.Widget.Accordion("Accordion2");
getOaToDoList();


});
function getOaToDoList(){
   $.ajax({
    url: servletUrl,
    type: "POST",
    data: "fresh="+ Math.random()+"&sysId=001&userId="+userId+"&rowNum=5&showType=2",//fresh\u4E3A\u4E86\u907F\u514D\u7F13\u5B58
    dataType: 'xml',
    timeout: 15000,
    error: function(request,message){
    alert('error='+request.status+'-----------'+message);
    },
    success: function(xml){
            if(xml == null ){
            alert("null");
            return;
            }
            $("#dbToDoTab tbody").html("");
$("#dpToDoTab tbody").html("");
$("#dyToDoTab tbody").html("");
$("#zbToDoTab tbody").html("");
            var resultData = $(xml).find("TodoInfos");
            var sysUrl=resultData.attr("url");
    resultData.find("TodoType").each(function(){
               var taskType = $(this);
               var typeId=taskType.attr("ID");
               var total=taskType.attr("total");
               var typeUrl=sysUrl+ taskType.attr("url");
               if(typeId == "1" ){
               $("#oa_db").text(total);
               taskType.find("TodoInfo").each(function(){
               var task= $(this);
               var taskUrl=sysUrl+ task.children("Url").text();
               var taskTitle=task.children("Title").text();
               var taskTime=task.children("ReleaseTime").text();
               $( "#dbToDoTab tbody" ).append("<tr height='25'>"
    +"<td width='30' align='center'>"+ imgHtml +"</td>"
    +"<td><a target='_blank' href='"+ taskUrl +"'>"+ taskTitle+"</a></td>"
    +"<td width='200' align='right'>"+ taskTime +"</td>"
    +"</tr>");
               });
               for(var i=1;i+parseInt(total) <= 5;i++){
    $( "#dbToDoTab tbody" ).append("<tr height='20'><td colspan='3'>&nbsp;</td></tr>");
    }
               $( "#dbToDoTab tbody" ).append("<tr height='25'><td colspan='3' align='right' valign='bottom'><div class='PanelTabMore'><a target='_blank' href='"+typeUrl+"'>&gt;&gt;\u66F4\u591A\u5F85\u529E</a></div></td></tr>");
                        }
               if(typeId == "4" ){
               $("#oa_dp").text(total);
               taskType.find("TodoInfo").each(function(){
               var task= $(this);
               var taskUrl=sysUrl+ task.children("Url").text();
               var taskTitle=task.children("Title").text();
               var taskTime=task.children("ReleaseTime").text();
             
               $( "#dpToDoTab tbody" ).append("<tr height='20'>"
               +"<td width='30' align='center'>"+ imgHtml +"</td>"
    +"<td><a target='_blank' href='"+ taskUrl +"'>"+ taskTitle+"</a></td>"
    +"<td width='200' align='right'>"+ taskTime +"</td>"
    +"</tr>");
               });
               for(var i=1;i+parseInt(total) <= 5;i++){
    $( "#dpToDoTab tbody" ).append("<tr height='20'><td colspan='3'>&nbsp;</td></tr>");
    }
               $( "#dpToDoTab tbody" ).append("<tr height='25'><td colspan='3' align='right' valign='bottom'><div class='PanelTabMore'><a target='_blank' href='"+typeUrl+"'>&gt;&gt;\u66F4\u591A\u5F85\u529E</a></div></td></tr>");
                        }
               if(typeId == "2" ){
               $("#oa_dy").text(total);
               taskType.find("TodoInfo").each(function(){
               var task= $(this);
               var taskUrl=sysUrl+ task.children("Url").text();
               var taskTitle=task.children("Title").text();
               var taskTime=task.children("ReleaseTime").text();
               $( "#dyToDoTab tbody" ).append("<tr height='20'>"
               +"<td width='30' align='center'>"+ imgHtml +"</td>"
    +"<td><a target='_blank' href='"+ taskUrl +"'>"+ taskTitle+"</a></td>"
    +"<td width='200' align='right'>"+ taskTime +"</td>"
    +"</tr>");
               });
               for(var i=1;i+parseInt(total) <= 5;i++){
    $( "#dyToDoTab tbody" ).append("<tr height='20'><td colspan='3'>&nbsp;</td></tr>");
    }
               $( "#dyToDoTab tbody" ).append("<tr height='25'><td colspan='3' align='right' valign='bottom'><div class='PanelTabMore'><a target='_blank' href='"+typeUrl+"'>&gt;&gt;\u66F4\u591A\u5F85\u529E</a></div></td></tr>");
                        }
               if(typeId == "3" ){
               $("#oa_zb").text(total);
               taskType.find("TodoInfo").each(function(){
               var task= $(this);
               var taskUrl=sysUrl+ task.children("Url").text();
               var taskTitle=task.children("Title").text();
               var taskTime=task.children("ReleaseTime").text();
               $( "#zbToDoTab tbody" ).append("<tr height='20'>"
               +"<td width='30' align='center'>"+ imgHtml +"</td>"
    +"<td><a target='_blank' href='"+ taskUrl +"'>"+ taskTitle+"</a></td>"
    +"<td width='200' align='right'>"+ taskTime +"</td>"
    +"</tr>");
               });
               for(var i=1;i+parseInt(total) <= 5;i++){
    $( "#zbToDoTab tbody" ).append("<tr height='20'><td colspan='3'>&nbsp;</td></tr>");
    }
               $( "#zbToDoTab tbody" ).append("<tr height='25'><td colspan='3' align='right' valign='bottom'><div class='PanelTabMore'><a target='_blank' href='"+typeUrl+"'>&gt;&gt;\u66F4\u591A\u5F85\u529E</a></div></td></tr>");
                        }
        });
}
});
}
function getGlToDoList(){
   $.ajax({
    url: servletUrl,
    type: 'POST',
    data: "fresh="+ Math.random()+"&sysId=002&userId="+userId+"&rowNum=5&showType=3",//fresh为了避免缓存
    dataType: 'xml',
    timeout: 15000,
    error: function(request,message){        
    alert('error='+request.status+'-----------'+message);
    },
    success: function(xml){

            if(xml == null){
            alert("null");
            return;
            }    
            var resultData = $(xml).find("TodoInfos");
            var sysUrl=$(xml).find("TodoInfos").attr("url");            
            resultData.find("TodoType1").each(function() {
var todoType1 = $(this);
var type1Total=todoType1.attr("total");
var type1Id=todoType1.attr("ID");
if(type1Id=="5"){
$("#gl_ds").text(type1Total);//设置待审总数
}
if(type1Id=="8"){
$("#gl_dy").text(type1Total);//设置待阅总数
}
todoType1.find("TodoType2").each(function() {
var todoType2 = $(this);
var typeId2 = todoType2.children("Id").text();
var type2Title= todoType2.children("Title").text();
var type2Total=todoType2.children("Total").text();
    var type2Url= sysUrl + todoType2.children("Url").text();
    var typename="";
    switch(typeId2){
case "6":typename="flowManager";break;
case "7":typename="taskPlan";break;
case "9":typename="taskAction";break;
case "10":typename="workCommunication";break;
case "16":typename="receivePaper";break;
case "17":typename="sendPaper";break;
default:return;
}
var todoImg = "<img src='<%=basePath%>/images/"+typename+".png' width='40' height='40' align='absmiddle'/> ";
    var dsHtml = todoImg + type2Title +"(0)";
    var dsHtmlLink =todoImg + "<a href ='"+ type2Url +"' target='_blank'>"+type2Title+"(<span class='numMoreZero'>"+type2Total+"</span>)</a>";
    if(type1Id=="5"){
   
    if(type2Total=="0"){
$("#ds_"+typename).html(dsHtml);
}else{
$("#ds_"+typename).html(dsHtmlLink);
}
}
if(type1Id=="8"){
if(type2Total=="0"){
$("#dy_"+typename).html(dsHtml);
} else {
$("#dy_"+typename).html(dsHtmlLink);
}
}
});
    });
                      }
                 });
}
function getTxToDoList(){
   $.ajax({
    url: servletUrl,
    type: 'POST',
    data: "'fresh='"+ Math.random()+"&sysId=003&userId="+userId+"&rowNum=5&showType=1",//fresh\u4E3A\u4E86\u907F\u514D\u7F13\u5B58
    dataType: 'xml',
    timeout: 15000,
    error: function(request,message){        
    alert('error='+request.status+'-----------'+message);
    },
    success: function(xml){
            if(xml == null){
            alert("null");
            return;
            }    
            var resultData = $(xml).find("TodoInfos");
$("#zmToDoTab tbody").html("");
var total=resultData.attr("total");
var sysUrl=resultData.attr("url");
                    $("#zm_db").text(total);
    resultData.find("TodoInfo").each(function(){
               var task = $(this);
               var taskUrl=sysUrl+task.children("Url").text();
               var taskTitle=task.children("Title").text();
               var taskTime=task.children("ReleaseTime").text();
               $( "#zmToDoTab tbody" ).append("<tr height='20'>"
    +"<td width='30' align='center'>"+ imgHtml +"</td>"
    +"<td><a target='_blank' href='"+ taskUrl +"'>"+ taskTitle+"</a></td>"
    +"<td width='200' align='right'>"+ taskTime +"</td>"
    +"</tr>");
                       
        });
      for(var i=1;i+total <= 5;i++){
    $( "#zmToDoTab tbody" ).append("<tr height='20'><td></td><td></td><td></td><td></td></tr>");
    }
    $( "#zmToDoTab tbody" ).append("<tr height='25'><td colspan='4' align='right' valign='bottom'><div class='PanelTabMore'><a target='_blank' href='"+sysUrl+"'>&gt;&gt;\u66F4\u591A\u5F85\u529E</a></div></td></tr>");
     }
});    
}



</script>
</head>
<body>
<div id="toDoList">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" >
办公自动化
</li>
<li class="TabbedPanelsTab"  id="bpmmessage" onclick="getGlToDoList()">
管理运营平台
</li>
<li class="TabbedPanelsTab"  onclick="getTxToDoList()">
专卖系统
</li>
</ul>
<div class="TabbedPanelsContentGroup" style="overflow: visible">
<!--oa标签页内容开始-->
<div class="TabbedPanelsContent">
<div id="Accordion1" class="Accordion" >
<div class="AccordionPanel">
<div class="AccordionPanelTab">
待办件(<span id="oa_db">0</span>)
</div>
<div class="AccordionPanelContent">
<table id="dbToDoTab" width="658" border="0" cellspacing="0"
cellpadding="0">
<tbody>
</tbody>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
待 批件(<span id="oa_dp">0</span>)
</div>
<div class="AccordionPanelContent">
<table id="dpToDoTab" width="658" border="0" cellspacing="0"
cellpadding="0">
<tbody>
</tbody>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
待 阅件(<span id="oa_dy">0</span>)
</div>
<div class="AccordionPanelContent">
<table id="dyToDoTab" width="658" border="0" cellspacing="0"
cellpadding="0">
<tbody>
</tbody>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
自办件(<span id="oa_zb">0</span>)
</div>
<div class="AccordionPanelContent">
<table id="zbToDoTab" width="658" border="0" cellspacing="0"
cellpadding="0">
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--oa标签页内容结束-->
<!--体系标签页内容开始-->

<div class="TabbedPanelsContent">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel" >
<div class="AccordionPanelTab">
待 审(<span id="gl_ds">0</span>)
</div>
<div class="AccordionPanelContent2">
<table width="658" height="164" border="0" cellspacing="0"
cellpadding="0" style="margin: 10px;">
<tr height="60">
<td id = "ds_flowManager"><img src='<%=basePath%>/images/flowManager.png' width='40' height='40' align='absmiddle'/>流程管理(0)</td>
<td id = "ds_taskPlan"><img src='<%=basePath%>/images/taskPlan.png' width='40' height='40' align='absmiddle'/>任务安排(0)</td>
<td id = "ds_taskAction"><img src='<%=basePath%>/images/taskAction.png' width='40' height='40' align='absmiddle'/>任务执行反馈(0)</td>
</tr>
<tr height="60">
<td id = "ds_workCommunication"><img src='<%=basePath%>/images/workCommunication.png' width='40' height='40' align='absmiddle'/>工作沟通(0)</td>
<td id = "ds_receivePaper"><img src='<%=basePath%>/images/receivePaper.png' width='40' height='40' align='absmiddle'/>收文信息(0)</td>
<td id = "ds_sendPaper"><img src='<%=basePath%>/images/sendPaper.png' width='40' height='40' align='absmiddle'/>发文信息(0)</td>
</tr>
<tr height="20">
<td align="right" colspan="3">
<div id = "ds_more_div"></div>
</td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
待 阅(<span id="gl_dy">0</span>)
</div>
<div class="AccordionPanelContent2">
<table width="658" height="164" border="0" cellspacing="0"
cellpadding="0" style="margin: 10px;">
<tr height="60">
<td id = "dy_flowManager"><img src='<%=basePath%>/images/flowManager.png' width='40' height='40' align='absmiddle'/>流程管理(0)</td>
<td id = "dy_taskPlan"><img src='<%=basePath%>/images/taskPlan.png' width='40' height='40' align='absmiddle'/>任务安排(0)</td>
<td id = "dy_taskAction"><img src='<%=basePath%>/images/taskAction.png' width='40' height='40' align='absmiddle'/>任务执行反馈(0)</td>
</tr>
<tr height="60">
<td id = "dy_workCommunication"><img src='<%=basePath%>/images/workCommunication.png' width='40' height='40' align='absmiddle'/>工作沟通(0)</td>
<td id = "dy_receivePaper"><img src='<%=basePath%>/images/receivePaper.png' width='40' height='40' align='absmiddle'/>收文信息(0)</td>
<td id = "dy_sendPaper"><img src='<%=basePath%>/images/sendPaper.png' width='40' height='40' align='absmiddle'/>发文信息(0)</td>
</tr>
<tr height="20">
<td align="right" colspan="3">
<div id = "dy_more_div"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--体系标签页内容结束-->
<!--专卖标签页内容开始-->
<div class="TabbedPanelsContent">
<div class="PanelContentDiv">
<div class="PanelTabCute">
待办数目：(<span id="zm_db">0</span>)
</div>
<table id="zmToDoTab" width="658" border="0" cellspacing="0"
cellpadding="0" height="225">
<tbody>
</tbody>
</table>
</div>
</div>
<!--专卖标签页内容结束-->
</div>
</div>
</div>
</body>
</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.