欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Web局部刷新的实现

程序员文章站 2022-06-17 14:22:34
...


这是在做传感器的时候遇到的问题,当传感器出过来数值时,数据库更新,然后页面也跟着刷新,只要把数字刷新就好,不用刷新整个页面。

方法。利用ajax的数据传输方式来实现更新。

首先导入jquery的包,然后在引用<script src="js/jquery-1.11.3.min.js"></script>

jsp端:

<script>
	$(document).ready(function() {//页面加载完成后执行此函数
		var tpid=<%=pid%>;
		fresh();
	});
	function fresh() {
		var tpid=<%=pid%>;
		//alert(tpid);
		 $.ajax({
				type : "POST",//
				url : "genxin.do",//请求地址
				dataType : 'json',//传输类型
				data : "pid=" + tpid,//输出数据
				success : function(data) {//服务器返回的值,这里面是你要刷新的东西
					var table = $(".table");
					table.empty();
					table.append("<tr><td>药品ID</td><td>药名</td><td>药品需重</td><td>已取重量</td><td>抓药进度</td></tr>");
					$.each(data,function(index,val){//它可以遍历一维数组、多维数组、DOM, JSON 等等格式
						table.append("<tr><td>"+val.mid+"</td><td>"+val.mname+"</td><td>"+val.mweight+"</td><td>"+val.yiqu+"</td><td>"+val.jindu+"</td></tr>");
					});
				},error:function(){
					alert("error");
				} 
		});
		 setTimeout("fresh()", 1000);//每隔一秒递归调用此函数,实现刷新的功能。
	}
</script>


服务器端:

 

 
List<Prescription> list = DbPoolOp.gets_prescription_list((String)(request.getParameter("pid"))); System.out.println((String)(request.getParameter("pid"))); request.setCharacterEncoding("utf-8"); // 这里不设置编码会有乱码 response.setContentType("text/html;charset=utf-8"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); //String sb="[{\"people\":\"hyyyhhy\"},{\"peopl\":\"11111\"}]"; String sb="["; for (int i = 0; i < list.size(); i++) { if (i > 0) { sb+=","; //如果有多个值,值中间加逗号 } sb+="{\"mid\":\""+ list.get(i).getMid() + "\","; // 第一个参数名name任意 sb+="\"mname\":\"" + list.get(i).getMname() + "\","; // 第二个参数名 sb+="\"mweight\":\"" + list.get(i).getMweight() + "\","; // 第三个参数名 Medicine medic = DbPoolOp.findMedicine_by_id(list.get(i).getMid()); double yiqu = medic.getMweight() - medic.getNowweight(); sb+="\"yiqu\":\"" + yiqu + "\","; // 第四个个参数名 sb+="\"jindu\":\"" + yiqu*100/list.get(i).getMweight() + "\"}";// 第五个个参数名 } sb+="]"; System.out.println(sb); out.println(sb); // 数据传到jsp里面的data里面 out.flush(); out.close();

 

 

 


json的格式 String sb="[{\"people\":\"hyyyhhy\"},{\"peopl\":\"11111\"}]";一个{}里面代表组数据