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


    <%@ 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());
    		
    	    
    	}
    	
    }
    

      

  • 相关阅读:
    超级简单的分屏控件【自定义PictureBox 继承于UserControl】
    《(学习笔记)两天进步一点点》(3)——应用BindingSource实现数据同步
    《(学习笔记)两天进步一点点》(5)——几个比较小的类,但很实用
    【唠叨两句】如何将一张树型结构的Excel表格中的数据导入到多张数据库表中
    《(学习笔记)两天进步一点点》(2) ——BindingSource基础操作
    微软通用类库——DbHelper
    经典的SQL语句
    ToString 中的常见格式
    【学习笔记】SQL Server 中的批量复制操作 (ADO.NET)
    《(学习笔记)两天进步一点点》(1)——Windows控件DGV
  • 原文地址:https://www.cnblogs.com/songjiabo/p/9082391.html
Copyright © 2020-2023  润新知