2010.02.03——Jquery ajax 动态更新 局部刷新
2024-05-11 14:49:11
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>2010.02.03——Jquery ajax 动态更新 局部刷新相关推荐
- asp ajax局部刷新,ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
- jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
- ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
- a标签不跳转+ajax异步请求+局部刷新页面
a标签不跳转 <td style="text-align:center;"><a href="" style="color: #2d ...
- ajax局部刷新html页面,Ajax实现页面局部刷新
最近开发网站,需要实现Ajax实现页面局部刷新,花了2天时间搞定,做个记录 开发环境 WAMP集成开发环境,也就是本地服务器 参考资料: 油管教学视频 简单的例子,可能利用的是bootstap提供的一 ...
- jquery,ajax动态从数据库加载数据并自动选中复选框
ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址 上一篇讲了下拉框,现在说说复选框 先从简单的单选框说起 & ...
- JavaScript通过API调取信息，AJAX请求，局部刷新
(个人的学习笔记,代码注释比较详细,可能废话也比较多) AJAX是网页异步刷新.局部刷新 AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后 ...
- AJAX：实现局部刷新
开始时间:2021-09-04 AJAX 全局刷新和局部刷新 全局刷新:整个浏览器被新的数据覆盖.在网络中传输大量的数据.浏览器需要加载,渲染页面. 部分刷新:在浏览器器的内部,发起请求,获取数据,改 ...
- php div图片局部刷新,前端jquery 后端 thinkphp 实现局部刷新
本例 用jquery 实现 通过把一个标签的变量传递给后台处理后,然后返回给前台另外一个变量 大致流程是这样的:前端编写html代码 ,加入要局部刷新的 jquery代码并指定要响应的url, 首先 ...
最新文章
- 常用Linux命令总结
- 在Vmware中安装Hyper-V
- oracle exists 变量,Num58 Oracle总结
- 第八周实践项目10 稀疏矩阵的十字链表表示
- 计算机桌面是是在哪个盘,电脑虚拟内存是设置在哪个盘的
- 对于Activity的理解
- 使用百度云服务器BCC搭建网站，过程记录
- ArrayList的底层实现原理
- kindle资源网址
- python tests in xxx问题
- 华为5G产品大配套，火星人光电互联大科普
- Android性能专项测试之Batterystats
- 博客专家 - 2022贡献榜与TOP100光荣榜【转】
- from Crypto.Cipher import AES报错解决【WindowsLinux】
- UltraEdit小众用法
- ofd在线预览功能开发 前端
- Stream 校验两个集合元素是否完全一致
- 关于vue告警：Closing curly brace does not appear on the same line as the subsequent block
- 【mysql】逻辑运算符
- 老板该如何选着程序员帮我做开发？