实现网页不刷新页面的情况下动态刷新表格数据

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现网页不刷新页面的情况下动态刷新表格数据相关的知识，希望对你有一定的参考价值。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>主页中间</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script src="js/jquery.js"></script>
<script type="text/javascript">
	//全局xmlHttp对象
	var xmlHttp;

	//获得xmlHttp对象
	function createXMLHttp() {
		//对于大多数浏览器适用
		var xmlHttp;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
		//考虑浏览器的兼容性
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
			if (!xmlHttp) {
				xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
			}
		}
		return xmlHttp;
	}

	//回调函数
	function callback() {
		//4代表完成
		if (xmlHttp.readyState == 4) {
			//200代表服务器响应成功，404代表资源未找到，500服务器内部错误
			if (xmlHttp.status == 200) {
				//交互成功获得响应的数据，是文本格式
				var result = xmlHttp.responseText;
				var tableStart = "<table id=‘test‘ class=‘providerTable‘ cellpadding=‘0‘ cellspacing=‘0‘ align=‘center‘ width=‘100%‘><tr>"
				var head = "<tr class=‘firstTr‘><th width=‘10%‘>终端号</th><th width=‘20%‘>终端名称</th><th width=‘20%‘>终端类型</th><th width=‘20%‘>终端状态</th><th width=‘20%‘>终端IP地址</th><th width=‘10%‘>终端音量</th></tr>"
				var tdStart = "<td>"
				var tdEnd = "</td>"
				//定义表格结束标签 ;
				var tableEnd = "</tr></table>"
				document.getElementById("t1").innerHTML = tableStart + head + tableEnd;
				
				var json1 = eval("(" + result + ")");
				for (i = 0; i < json1.length; i++) {
					// 追加行 ;
					var oRow1 = test.insertRow(test.rows.length);
					// 获取表格的行集合。 
					var aRows = test.rows;
					// 获取第一行的单元格集合。 
					var aCells = oRow1.cells;
					// 在第一行中插入两个单元格。 
					var oCell1_1 = oRow1.insertCell(aCells.length);
					var oCell1_2 = oRow1.insertCell(aCells.length);
					var oCell1_3 = oRow1.insertCell(aCells.length);
					var oCell1_4 = oRow1.insertCell(aCells.length);
					var oCell1_5 = oRow1.insertCell(aCells.length);
					var oCell1_6 = oRow1.insertCell(aCells.length);
					var json = json1[i];
					/* if(json.terminalState="断线"){
					 	json.terminalIPAddress="";
					 	json.terminalVol=""
					 } else{} */
					var terminalID = tdStart + json.terminalID + tdEnd
					 
					var terminalIPAddress = tdStart + json.terminalIPAddress + tdEnd
					
					var terminalName = tdStart + json.terminalName + tdEnd
					
					var terminalState = tdStart + json.terminalState + tdEnd
					    
					var terminalType = tdStart + json.terminalType + tdEnd
					
					var terminalVol = tdStart + json.terminalVol + tdEnd
					// 向单元格内填充数据 ;        
					oCell1_1.innerHTML = terminalID;
					oCell1_2.innerHTML = terminalName;
					oCell1_3.innerHTML = terminalType;
					oCell1_4.innerHTML = terminalState;
					oCell1_5.innerHTML = terminalIPAddress;
					oCell1_6.innerHTML = terminalVol ;
				}
				setTimeout(getContents, 1000);
			}
		}
	}

	//获得内容
	function getContents() {
		//首先获得用户的输入内容，这里获得的是一个结点
		//var content = document.getElementById("keyword");
		//if(content.value ==""){
		//  return;
		//}
		//向服务器发送内容，用到XmlHttp对象
		xmlHttp = createXMLHttp();
		//给服务器发送数据，escape()不加中文会有问题
		var url = "Test";
		//true表示js的脚本会在send()方法之后继续执行而不会等待来自服务器的响应
		xmlHttp.open("GET", url, true);
		//xmlHttp绑定回调方法，这个方法会在xmlHttp状态改变的时候调用,xmlHttp状态有0-4，
		//我们只关心4，4表示完成
		xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
	}
	/* setInterval(function(){
		$("#t1").load(location.href+"#v1>*","");
	},3000); */
</script>

</head>

<body onload="getContents()">
	<section class="publicMian " id="t1"> <!--表格 样式公用-->
	</section>
</body>
</html>

　　

package com.cscy.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import hy.com.port.BroadcastImpl;
import hy.com.rmi.entity.TerminalInfomation;
import net.sf.json.JSONArray;

public class TestServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
	    resp.setCharacterEncoding("utf-8");
	    
	    TerminalInfomation[] terminalInfo = BroadcastImpl.getTerminalInfomation();	   
		resp.getWriter().write(JSONArray.fromObject(terminalInfo).toString());
		
	    
	}
	
}

　　

以上是关于实现网页不刷新页面的情况下动态刷新表格数据的主要内容，如果未能解决你的问题，请参考以下文章

如何在不刷新php页面的情况下跟踪mysql数据库中的更改？

如何在不刷新html页面的情况下在表格上显示数据（使用nodejs和mysql ajax）

如何在不刷新网页的情况下使用 ajax 和 jquery 动态更改 Datatables 的多个列标题？

网页设计中选中下拉列表中选项后如何实现页面刷新？

在不刷新的情况下更新网页的一部分

Ajax 异步局部刷新