dwr和js来实现ajax技术

于 2009-12-17 16:58:54 发布 · 112 阅读 · 0
文章标签：

#DWR #Ajax #JavaScript #JSP #Excel #ViewUI

本文介绍了一种在JSP页面中实现局部刷新的方法，通过使用DWR调用后台服务更新数据库，并利用JavaScript处理页面元素的显示与隐藏，实现了处理状态和确认状态的即时更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在jsp页面  处于一个超链接：

如下图：对于处理状态 和确认状态  当数据库中是 0 时 页面显示 “否” 并在 “否”上添加超链接 ；

点击 确认状态的“否” 可以再页面显示 确认人 和 确认时间， 点击 处理状态 的“否”时

  1. 如果 确认状态为 ：“否” 将处理状态，处理人，处理时间，确认状态，确认人，确认时间 都显示出来！
  2. 如果 处理状态 为：“否” 就将处理状态，

注：

处理人，处理时间，显示出来！

时间都为当前时间，处理人和确认人 为当前 登录的人员！

操作如下图：



 


上图所示： 处理时间和确认时间 相同的是 先点击了 处理状态，其中确认时间 晚于 确认时间的是 先点击确认状态，这是确认状态已经有值，所以只显示 处理人和处理时间；

以下是这个页面用到的jsp：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ include file="/common/header.jsp"%>
<script language="javascript"  src="${path}/page/wrm/js/util.js"></script>
<script language="javascript"  src="${path}/page/wrm/js/engine.js"></script>
<script language="javascript"  src="${path}/dwr/interface/AnalyseMessageService.js"></script>
<%-- 
	对比分析消息（列表查询）页面
	Author 	: 
	Date	: 2009-09-28
--%>
<script type="text/javascript">

/**
 * 时间对象的格式化;
 */
Date.prototype.format = function(format) {
    /*
     * eg:format="YYYY-MM-dd hh:mm:ss";
     */
    var o = {
        "M+" :this.getMonth() + 1, // month
        "d+" :this.getDate(), // day
        "h+" :this.getHours(), // hour
        "m+" :this.getMinutes(), // minute
        "s+" :this.getSeconds(), // second
        "q+" :Math.floor((this.getMonth() + 3) / 3), // quarter
        "S" :this.getMilliseconds()
    // millisecond
    }

    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
    }

    for ( var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
                    : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}

	
	//	改变处理
	function changeFlag(id,rowcount,confirmFalg){
	//	向后台数据库中 传的时间
	var   now = new Date().format("yyyy-MM-dd hh:mm:ss"); 
	var  loginName = document.getElementById("analyseMessageForm_loginName").value;
	
		AnalyseMessageService.updateAnalyseMessageDealFlag(id,now,loginName,function(dealFlag)
				{
					var updateID = eval("'dealFlagTd'+rowcount");
					var updateIDB = eval("'dealFlagTd1'+rowcount");
					
					var dealTimeIDTd = eval("'dealTimeTd'+rowcount");
					var dealTimeID = eval("'dealTime'+rowcount");
					var dealTimediv = eval("'dealTimediv'+rowcount");
					
					var dealerTd = eval(" 'dealerTd'+rowcount");
					var dealer = eval(" 'dealer'+rowcount");
					var dealerdiv = eval(" 'dealerdiv'+rowcount");
					//  改变处理状态
					
					var oDivId = document.getElementById(updateID);					
					 if (oDivId!=null){
						oDivId.style.display = "none";
					 }					
					var oDivId = document.getElementById(updateIDB);
					 if (oDivId!=null){
						oDivId.style.display = "block";
					 }
					 // 添加处理时间
					 
					var oDivTime = document.getElementById(dealTimeIDTd);
					if(oDivTime != null){
					 	oDivTime.style.display = "none";
					}
					 var oDivTime = document.getElementById(dealTimeID);
					 var oDivTimediv = document.getElementById(dealTimediv);										   			 
					if(oDivTime != null){
						oDivTimediv.style.display = "block";						
					 	oDivTime.style.display = "block";
					 	// jsp页面页显示的时间
					 	oDivTime.innerHTML=new Date().format("yy-MM-dd hh:mm"); 
					}
					
					//添加处理人
					var odealertd = document.getElementById(dealerTd);
					if(odealertd != null){
						odealertd.style.display = "none";
					}
					var odealer = document.getElementById(dealer);
					var odealerdiv = document.getElementById(dealerdiv);
					if(odealerdiv!=null){
						odealer.style.display="block";
						odealerdiv.style.display="block";
						odealerdiv.innerHTML=loginName;
					}
					 
					 
					 // 判断是否已确认  
					 var confirmerdivId = eval("'confirmerdiv'+rowcount");
					 var confirmerdiv = document.getElementById(confirmerdivId);
					 // 如果没有确认，就将确认 全部设值					 
					 if(confirmerdiv.innerHTML == ""){
					 	changeConfirmFlag(id,rowcount);
					 }
					
					
				}
		);
	
	}
	
	// 改变确认 
	function changeConfirmFlag(id,rowcount){

	var   now = new Date().format("yyyy-MM-dd hh:mm:ss"); 
	var  loginName = document.getElementById("analyseMessageForm_loginName").value;
	
		AnalyseMessageService.updateAnalyseMessageConfirmFlag(id,now,loginName,function(confirmFlag){
					var updateID = eval("'confirmFlagTd'+rowcount");
					var updateIDB = eval("'confirmFlag'+rowcount");
					
					var confirmerTdId = eval("'confirmerTd'+rowcount");
					var confirmerId = eval("'confirmer'+rowcount");
					var confirmerdivId = eval("'confirmerdiv'+rowcount");
					
					
					var confirmTimedivId = eval("'confirmTimediv'+rowcount");
					var confirmTimeId = eval("'confirmTime'+rowcount");
					var confirmTimeTdId = eval("'confirmTimeTd'+rowcount");
					//修改确认标识					
					var oDivId = document.getElementById(updateID);
					if(oDivId != null){
						oDivId.style.display = "none";
					}
					var oDivId = document.getElementById(updateIDB);
					if (oDivId!=null){
						oDivId.style.display = "block";
					}
					
					//添加确认人
					var confirmertd = document.getElementById(confirmerTdId);
					var confirmer = document.getElementById(confirmerId);
					var confirmerdiv = document.getElementById(confirmerdivId);
					
					if(confirmertd != null){
						confirmertd.style.display="none";
					}
					if(confirmer != null){
						confirmer.style.display="block";
					}
					if(confirmerdiv != null){
						confirmerdiv.style.display="block";
						confirmerdiv.innerHTML=loginName;
					}
					
					//添加确认时间
					var confirmTimeTd = document.getElementById(confirmTimeTdId);
					var confirmTime = document.getElementById(confirmTimeId);
					var confirmTimediv = document.getElementById(confirmTimedivId);
					
					
					if(confirmTimeTd != null ){
						confirmTimeTd.style.display="none";
					}
					if(confirmTime!= null){
						confirmTime.style.display="block";
					}
					if(confirmTimediv != null){
						confirmTimediv.style.display="block";
						confirmTimediv.innerHTML=new Date().format("yy-MM-dd hh:mm");
					}
					
				
					 
		
		
			}
		);	
		
		
	
	}
	
     function doQuery(){
			fnTrimForm(analyseMessageForm);

		analyseMessageForm.action = "${path}/analyseMessage/listAnalyseMessage.action";
		analyseMessageForm.submit();
	}
	function goDetail(id){
	fnTrimForm(analyseMessageForm);
		var btsNumber = document.getElementById('analyseMessageForm_analyseMessage_btsNumber').value;
		var regionName = document.getElementById('analyseMessageForm_regionName').value;
		window.location="${path}/analyseMessage/viewAnalyseMessage.action?id="+id+"&analyseMessage.btsNumber="+btsNumber+"&analyseMessage.regionName="+regionName;
	}


	
	 function doExcel(){
			fnTrimForm(analyseMessageForm);

		analyseMessageForm.action = "${path}/analyseMessage/createExportAnalyseMessage.action";
		analyseMessageForm.submit();
	}
	function showReginTree(){
		var url = "${path}/analyseMessage/setRegionTree.action";
		window.open(url,'',"width=220, height=270,top=200,left=430,scrollbars=no,menubar=no,toolbar=no");
	}
	
	
      window.onload   =   function()   
      {   
        var   tab   =   document.getElementById("coolGrid1");   
        if(tab)   fixupFirstRow(tab);   
      } 
	
     

</script>

<s:form name="analyseMessageForm"  method="post" theme="simple" id="analyseMessageForm">
 <s:hidden name="analyseMessage.btsNumber"/>     
    <div class="title">对比分析</div>
    <div class="search">
 	<table class="table">
        <tr>
       <td width="4%" rowspan="2"><img src="${path}/page/wrm/image/search.gif" width="40" height="39"></td>
       <td nowrap="nowrap">消息类型</td>
	        <td>
	        <s:select name="analyseMessage.type" list="analyseMsgList" listKey="number" listValue="name" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/>
	        </td>
         
        
			
		<td nowrap="nowrap">是否考核</td>
        <td>
        <s:select name="analyseMessage.check"   list='msgCheckMap' listKey="key" listValue="value" value="analyseMessage.check" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/> 
        </td>
		  <td nowrap="nowrap">所属区域</td>
         <td nowrap="nowrap">
            <s:if test="region.number=='001'">
		        	<s:textfield name="regionName"  onfocus="this.blur()" cssClass="text"/>
		        	<s:hidden name="regionNumber"/>
			    	<img src="${path}/etc/img/analyse/search.png"  style="cursor:hand;" onclick="showReginTree()">
		    </s:if>
			<s:else>
			<s:select name="regionName"   list='regionList' listKey="name" 
			listValue="name"  emptyOption="false" theme="simple" cssClass="select"/>
			<s:hidden name="regionNumber" value="${region.number}"/>
			</s:else>
		</td>
		 
		 
		
		 
		 
		 <td rowspan="2" align="center">
 	    		<input type='button' onclick="doQuery();"  class="button" value="查 询" /> 
 	    </td>
    </tr>
    <tr>
    	<td  nowrap="nowrap">基站类型</td>
        	<td><s:select name="analyseMessage.btsType" list="btsTypeList" listKey="nameEn" listValue="nameEn" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/>
        	</td>
		 
		<td nowrap="nowrap">处理状态</td>
        <td>
        <s:select name="analyseMessage.dealFlag"   list='msgDealMap' listKey="key" listValue="value" value="analyseMessage.dealFlag" headerKey="" headerValue="--全部--" emptyOption="false" theme="simple" cssClass="select"/> 
        </td>
        
        <td nowrap="nowrap">
			消息体
		</td>
		<td>
			<s:textfield name="analyseMessage.content"  cssClass="text" onchange="getTrimString(this)" />
		</td>
    	
    	

    	
    </tr>

    </table>
    </div>
<div class="history-item-title">对比分析消息列表</div>
<div style="overflow: auto; width: 100%; height: 300px">
<div class="history-item-content">
<div   class=datagrid   style="width:   100%;   height:   280;   overflow:   auto;">   
<table id=coolGrid1   class="listtable"  onclick='fnSelectTR()'   cellSpacing=0     cellPadding=2  >  

<s:hidden name="loginName"/>
	
	
		<tr align="center"  class="header">
        	<td nowrap>序号</td>
        	<td nowrap> </td>
        	<td nowrap>消息类型</td>
        	<td nowrap>消息体</td>
        	<td nowrap>所属区域</td>
        	<td nowrap>基站类型</td>
        	<td nowrap>板件规格</td>
        	<td nowrap>板件序列号</td>
        	<td nowrap>是否考核</td>
        	<td nowrap>处理状态</td>
        	
        	<td nowrap="nowrap">处理人</td>
        	<td nowrap="nowrap">处理时间</td>
        	<td nowrap="nowrap">确认状态</td>
        	<td nowrap="nowrap">确认人</td>
        	<td nowrap="nowrap">确认时间</td>
        	
        	<td nowrap>创建时间</td> 
        	<td nowrap="nowrap">采集时间</td>    	  
		</tr>

	
		<s:iterator value="analyseMessageList" status="rowstatus" id="it">
    		<tr>
    		  	<td nowrap><s:property value="#rowstatus.count" /></td>
    		  	<s:if test="readFlag==1">
    		    <td valign="middle" class="common_td_text" title="查看消息" >
    		    	<a href="#" onclick="goDetail('<s:property value="id" />')"><img src="${path}/etc/img/analyse/readed.gif" style="height:14;width:18" border=0 /></a>
    		    </td>
    		  </s:if>
    		  <s:else>
    		    <td valign="middle" class="common_td_text" title="查看消息" >
    		    	<a href="#" onclick="goDetail('<s:property value="id" />')"><img src="${path}/etc/img/analyse/unread.gif" style="height:14;width:18" border=0 /></a>
    		    </td>
    		  </s:else>
    		  	<td nowrap><s:property value="type" /></td>
				<td nowrap title='<s:property value="content" /> '><s:property value="content" /></td>
				<td nowrap><s:property value='regionName' /></td>
				<td nowrap><s:property value="btsType" /></td>
				<td nowrap><s:property value="equipmentSpec" /></td>
				<td nowrap><s:property value="serialNumber" /></td>
				<td nowrap>
					<s:if test="check==0">否</s:if>
					<s:else>是</s:else>
				</td>
				
				

				<td valign="middle" class="common_td_text" id="dealFlagTd<s:property value="#rowstatus.count" />">
					<s:if test="dealFlag==0"><a href="#" onclick="changeFlag('${id }','<s:property value="#rowstatus.count" />','<s:property value="confirmFlag" />');" >否</a></s:if>
					<s:else>是</s:else>
				</td>
				<td valign="middle" class="common_td_text" id="dealFlagTd1<s:property value="#rowstatus.count" />">
					是
				</td>
				<script>
				var oDivId = document.getElementById('dealFlagTd1<s:property value="#rowstatus.count" />');
				 if (oDivId!=null){
					oDivId.style.display = "none";
				 }
				</script>
				
				
				
				<td nowrap="nowrap" id="dealerTd<s:property value="#rowstatus.count" />" >
								<s:property value="dealer" />			
				</td>
				<td nowrap="nowrap" id="dealer<s:property value="#rowstatus.count" />">
					<s:if test="dealer != null">
						<s:property value="dealer" />
					</s:if>
					<s:else>
						<div id="dealerdiv<s:property value="#rowstatus.count" />" />
					</s:else>
					
				</td>
				<script>
				var odealerDivId = document.getElementById('dealer<s:property value="#rowstatus.count" />');
				var odealerDiv = document.getElementById('dealerdiv<s:property value="#rowstatus.count" />');
				 if (odealerDivId!=null){
					odealerDivId.style.display = "none";
				 }
				 if (odealerDiv!=null){
					odealerDiv.style.display = "none";
				 }
				</script>
				
				
				
				<td nowrap id="dealTimeTd<s:property value="#rowstatus.count" />">
						<s:date name="dealTime"  format="yy-MM-dd HH:mm"/>
				</td>
				<td nowrap id="dealTimediv<s:property value="#rowstatus.count" />">	
					<s:if test="dealTime != null ">
						<s:date name="dealTime"  format="yy-MM-dd HH:mm"/>
					</s:if>	
					<s:else>			
						<div id="dealTime<s:property value="#rowstatus.count" />"  />	
					</s:else>					
				</td>				
				<script>
				var oDivTime = document.getElementById('dealTime<s:property value="#rowstatus.count" />');
				var oDivTimediv = document.getElementById('dealTimediv<s:property value="#rowstatus.count" />');
				 if (oDivTime!=null){
					oDivTime.style.display = "none";
				 }
				 if (oDivTimediv!=null){
					oDivTimediv.style.display = "none";
				 }
				</script>
				
				
				
				<td nowrap id="confirmFlagTd<s:property value="#rowstatus.count" />">
					<s:if test="confirmFlag == 0 ">
						<a href="#" onclick="changeConfirmFlag('${id }','<s:property value="#rowstatus.count" />') ">否</a>
					</s:if>
					<s:else>是</s:else>					
				</td>
				<td nowrap id="confirmFlag<s:property value="#rowstatus.count" />">
					是				
				</td>
				<script>
				var oconfirmFlagDivId = document.getElementById('confirmFlag<s:property value="#rowstatus.count" />');
				 if (oconfirmFlagDivId!=null){
					oconfirmFlagDivId.style.display = "none";
				 }
				</script>
				
				<td nowrap="nowrap" id="confirmerTd<s:property value="#rowstatus.count" />" >
						<s:property value="confirmer" />					
				</td>
				<td nowrap id="confirmer<s:property value="#rowstatus.count" />">
					<div id="confirmerdiv<s:property value="#rowstatus.count" />" />
				</td>
				
				<script>
				var oconfirmerDivId = document.getElementById('confirmer<s:property value="#rowstatus.count" />');
				var oconfirmerDivdiv = document.getElementById('confirmerdiv<s:property value="#rowstatus.count" />');
				 if (oconfirmerDivId!=null){
					oconfirmerDivId.style.display = "none";
				 }
				 if(oconfirmerDivdiv != null){
				 	oconfirmerDivdiv.style.display = "none";
				 }
				</script>
				
						
				<td nowrap id="confirmTimeTd<s:property value="#rowstatus.count" />">
					<s:date name="confirmTime" format="yy-MM-dd HH:mm"/>
				</td>
				<td nowrap id="confirmTime<s:property value="#rowstatus.count" />">					
					<div id="confirmTimediv<s:property value="#rowstatus.count" />"  />						
				</td>
				<script>
				
				var oconfirmTimeid = document.getElementById('confirmTimediv<s:property value="#rowstatus.count" />')	;
				var oconfirmTimeiddiv = document.getElementById('confirmTime<s:property value="#rowstatus.count" />')	;	
				if(oconfirmTimeid != null){
					oconfirmTimeid.style.display="none";
				}	
				if(oconfirmTimeiddiv != null){
					oconfirmTimeiddiv.style.display="none";
				}		
				</script>
				
				
				
				
				
				
				<td valign="middle" class="common_td_text" nowrap><s:date name="createTime" format="yy-MM-dd HH:mm"/></td>
				<td nowrap="nowrap">
						<s:date name="gatherTime" format="yy-MM-dd HH:mm" />
				</td>
			</tr>
		</s:iterator>
		
	</table>
	</div>
	</div>
	</div>
   <div class="history-item-title"></div>
   <table width="100%" height="30">
            <tr>
                <td bgcolor="#FFFFFF"> 
                    <%@ include file="/WEB-INF/inc/page.inc"%>
                </td>
            </tr>
  </table>
	
</s:form>

<s:if test="btsNumber!=null && !btsNumber.equals('')">
<input type="button" class="button_tt" value="关 闭" onclick="window.close();"/>
</s:if>
<s:else>
  <div align="center">
   <input type="image" src="${path}/page/wrm/image/export_excel.gif" onclick="doExcel();">
   </div>
</s:else>

<%@ include file="/common/footer.jsp"%>

  

其中用到了dwr配置：

<convert converter="bean" match="com.iman.nrms.nrmwns.common.domain.BaseCode"/>	
		<create creator="spring" javascript="AnalyseMessageService">
            			<param name="beanName" value="analyseMessageService"/>
			<include method="updateAnalyseMessageDealFlag"/> 
			<include method="updateAnalyseMessageConfirmFlag"/>
			
		</create>

 

analyseMessageService：

package com.iman.nrms.nrmwns.wrm.analyse.domain.service;


import java.util.List;

import com.iman.nrms.nrmwns.wrm.analyse.domain.model.AnalyseMessage;
import com.iman.nrms.nrmwns.wrm.analyse.domain.model.AnalyseMessageHistory;



public interface AnalyseMessageService {
	
			
	/**
	 * 更改消息处理状态
	 * 
	 * @param analyseMessage
	 * @returnType: void
	 * @author: 李斌
	 * @data: 2009-10-29
	 * @time: 下午03:57:20
	 */
	public void updateAnalyseMessageDealFlag(String id,String nowdate,String loginName);
	
	/**
	 * 对比分析消息报表
	 * 
	 * @param analyseMessage
	 * @return
	 * @returnType: List<AnalyseMessage>
	 * @author: 李斌
	 * @data: Oct 16, 2009
	 * @time: 4:44:52 PM
	 */
	public List<AnalyseMessage> createExportAnalyseMessage(AnalyseMessage analyseMessage);
	
		
	/**
	 * 更具 标识属性 修改 确认信息
	 * 
	 * @param id
	 * @returnType: void
	 * @author: 
	 * @data: Dec 14, 2009
	 * @time: 5:29:29 PM
	 */
	public void updateAnalyseMessageConfirmFlag(String id,String nowdate,String loginName);
}

 
 

实现类：

就只在数据库中  更改 数据库中的数据！在Service中调用即可！

 

 

最后在啰嗦一点：

 

在这里：

可以用Action 请求直接实现：但这属于另一种方式 另当别论了！且用Action 刷新页面时 速度较慢（数据量较大时）！；

用这种方式，一共分两步实现：

1.在jsp页面显示出  你要显示的数据，及（处理/确认）状态、人、时间，（这些主要在js函数 那几个display完成这些只是显示并没有存到数据库中！）

2.通过dwr调用后台方法，在Manager中操作数据库（Manager中的数据全是由jsp页面在调用dwr是传给后台的所以数据肯定是一致的），是数据库中数据和页面数据相一致！这样就完成了，局部刷新！（治理的页面事实上欺骗了 浏览者，看到的数据只是暂存页面的数据，当每次翻页或重新请求Action时 才是从数据库中读出的数据）

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值