2010.02.03——Jquery ajax 动态更新局部刷新

最新推荐文章于 2023-03-19 20:07:46 发布

cody123

最新推荐文章于 2023-03-19 20:07:46 发布

阅读量81

点赞数

文章标签： Ajax jQuery HTML ViewUI

2010.02.03——Jquery ajax 动态更新局部刷新
最后的效果如图所示，说要达到的目标就是：
当我选着不同的时间，最后一列的时间也跟着变，并且将一系列的参数传到后台，计算出结果，并填充到下面的td中去

[b]后台：[/b]

public ModelAndView dataByYear(HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		String name = MethodUtil.param(request, "name");
		String st = MethodUtil.param(request, "startTime");
		String et = MethodUtil.param(request,"endTime");
		String nt = MethodUtil.param(request, "newTime");
		.....
		.....
		List<Double> list = fn(request,K_RGNCD,stsb.toString(),etsb.toString(),sign,sxun,exun);
		PrintWriter out = response.getWriter();
		StringBuffer sb = new StringBuffer();
		for(Double d: list){
			sb.append(d);
			sb.append("-");
		}
		out.print(sb.toString());
		return null;

	}

后台就是经过一系列的操作，得到一组类似1.2-2.3-25.1-0.5- 的数据

[b]js:[/b]

<head>
<script type="text/javascript">

//用于生成那个下拉框内的时间
function fn3($year1){
	var str1 = "";
	var str2 = "";
	//if(checkBrowser()){
	//	var date = new Date().getYear();
	//}else{
	//	var date = new Date().getYear()+1900;
	//}
	var date = $('#endTime').attr('value');
	for(var i = parseInt(date)-1;i>=1949;i--){
		str1 += "<option value="+i+">"+i+"</option>";
	}
	$year1.empty();
	$year1.append(str1);
}

//用于生成table的最后一列
function fn4(){
	var $text = $('#year option:selected').text();
	var text = "较"+$text+"年";
	$('#year2').text(text);
	//生成完 就调用ajax
	fn5();
}

//解决浮点数的问题
function roundFloat(number,digits){  
    with(Math){  
        return round(number*pow(10, digits))/pow(10, digits);  
    }  
} 

//用于和后台的ajax请求
function fn5(){
	$.ajax({
		type: "POST",
		url: "yuliang_dataByYear.do",
		data: {name:$('#name').attr("value"),startTime:$('#startTime').attr('value'),endTime:$('#endTime').attr

('value'),newTime:$('#year option:selected').text()},
		dataType: "html",
		success: function(data){
					var str = data;
					var strs = str.split("-");//拆分后台传过来的数据，装到数组里面
					//alert(strs);
					var trNumber = $('tr').size();//得到table中一共有几行
					var tdNumber = $('tr:first td').size();//得到一行中一共有几列
					//alert(trNumber);
					//alert(tdNumber);
					//alert($('tr:eq(2) td:eq(8)').size())
					for(var i=1;i<trNumber;i++){//i=1，不从0开始排除第一行表头
						var text = 0;
						text = $('tr:eq('+i+') td:eq(1)').text();//得到第二列的数据
						//alert(text);
						//tdNumber-2,因为列也是从0开始的，所以要减2，这个是给倒数第二列赋值
						$('tr:eq('+i+') td:eq('+(tdNumber-2)+')').text(roundFloat(strs[i-1],2));
						var number = roundFloat((text-strs[i-1]),2);
						//if(number==0) {
						//	number = number+".0";
							//alert(number);
						//}
						//给最后一列赋值
						$('tr:eq('+i+') td:eq('+(tdNumber-1)+')').text(number);
					}
				}
	});
}

$(function(){
	fn3($('#year'));
	fn4();
	//fn5();
	//alert();
	$('#year').change(fn4);

});
</script>
</head>

设计思路就是找到需要填充的列，挨个赋值

[b]html[/b]

<hr>
<input id="name" type="hidden" value="${name }"/> //隐藏文本域，用于上面传参数
<input id="startTime" type="hidden" value="${start }"/>
<input id="endTime" type="hidden" value="${end }"/>
<center><font color="#005ECE" size="5">${name }统计表 <br />${start }至${end }</font>
<h5 align="right">收入单位：￥</h5>
<table cellspacing="0" align="center" bgcolor="#EFF6FE">
	<tbody>
		<tr>
			<td>地区</td>
			<td>收入</td>
			<td>收入率</td>
			<td>历年同期</td>
			<td>较历年同期</td>
			<td>去年同期</td>
			<td>较去年同期</td>
			<td><select id="year"><option value="2008">2008</option></select></td>
			<td><div id="year2"></div></td>
		</tr>
		<c:forEach var="yuliangTable" items="${yuliangTableList}">
		<tr>
			<td>${yuliangTable.dq }</td>
			<td>${yuliangTable.mpjyl }</td>
			<c:if test="${!empty yuliangTable.yljpl }">
				<td>${yuliangTable.yljpl }</td>
			</c:if>
			<c:if test="${empty yuliangTable.yljpl }">
				<td> </td>
			</c:if>
			<c:if test="${!empty yuliangTable.lntq }">
				<td>${yuliangTable.lntq }</td>
			</c:if>
			<c:if test="${empty yuliangTable.lntq }">
				<td> </td>
			</c:if>
			<c:if test="${!empty yuliangTable.jlntq }">
				<td>${yuliangTable.jlntq }</td>
			</c:if>
			<c:if test="${empty yuliangTable.jlntq }">
				<td> </td>
			</c:if>
			<td>${yuliangTable.qntq }</td>
			<td>${yuliangTable.jqntq }</td>
			<td> </td>
			<td> </td>
		</tr>	
		</c:forEach>
	</tbody>
</table>
</center>