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\"}]";一个{}里面代表组数据
上一篇: 验证邮箱格式
推荐阅读
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
使用 CSS3 伪元素实现立体的照片堆叠效_html/css_WEB-ITnose
-
使用css中的page-break-after属性来实现WEB页面强制分页打印
-
CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose
-
Python实现手写一个类似django的web框架示例
-
AJAX的原理—如何做到异步和局部刷新【实现代码】
-
CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose
-
php+ajax实现无刷新的新闻留言系统_PHP
-
DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose
-
请问如何实现table的外框和内框线的粗度不同??_html/css_WEB-ITnose