ajax实现为table添加数据定时刷新 _a-table 定时切换数据-CSDN博客

本文链接：https://blog.csdn.net/lovetomcat/article/details/4184171

最近做个会议系统要求从底层发送数据包后在前台显示数据并定时刷新无赖今天查了好多关于这方面的资料终于搞定。把代码贴一下以后做参考 2009-05-14

-------------------------------------action层的--------------------------------------------------------

public void conf_control()
{
   confList = getConfInforDAO().getConfLists();(这点我写成从数据库读的实则读的数据包)
   if(confList!=null)
   {
        PrintWriter out = null;
      try{
     getResponse().setContentType("text/xml; charset=GB2312");
     out = getResponse().getWriter();
     out.println("<?xml version=/"1.0/" encoding=/"GB2312/"?>");
     out.println("<confs>");
      for (int i = 0; i < confList.size(); i++) {
        TconfInfo info = confList.get(i);
        out.print("<conf>");
        out.print("<confName>"+info.getConfName()+"</confName>");
        out.print("<confTopic>"+info.getConfTopic()+"</confTopic>");
        out.print("<beginTime>"+info.getBeginTime()+"</beginTime>");
        out.print("<endTime>"+info.getEndTime()+"</endTime>");
        out.print("<createTime>"+info.getCreateTime()+"</createTime>");
        out.print("<confSize>"+info.getConfSize()+"</confSize>");
        out.print("</conf>");
       }
      out.print("</confs>");
      out.flush();
         out.close();
      }catch(Exception exception)
      {
       System.out.println("出现异常 ╮(╯﹏╰）╭");
      }
   }else
   {
     System.out.println("没有数据");
     System.out.println("╮(╯﹏╰）╭");
   }


}

-----------------------------------------jsp页面-------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.net.URLEncoder"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会议监控</title>

       //更新table的内容
         function updateTable(){
                //清除表格
         clearTable();
             var confs=XMLHttpReq.responseXML.getElementsByTagName("conf");
             var table=document.getElementById("confTable");
             for(var i=0;i<confs.length;i++){
               var id = i+1; //得一个序号
               var confName = confs[i].selectSingleNode("confName").text;//取结点里的数据
                  var confTopic = confs[i].selectSingleNode("confTopic").text;
                  var createTime = confs[i].selectSingleNode("createTime").text;
                  var beginTime = confs[i].selectSingleNode("beginTime").text;
                  var endTime    = confs[i].selectSingleNode("endTime").text;
                  var confSize   = confs[i].selectSingleNode("confSize").text;

                  var row = table.insertRow(i+1);
                  var cellId = row.insertCell(0);
                  cellId.innerHTML = id;
                // var cellConfName = row.insertCell(1);
               //   cellConfName.innerHTML = confName;
                  var cellConfTopic = row.insertCell(1);
                  cellConfTopic.innerHTML = confTopic;
                  var cellBeginTime = row.insertCell(2);
                  cellBeginTime.innerHTML = beginTime;
                  var cellendTime = row.insertCell(3);
                  cellendTime.innerHTML = endTime;
                  var cellCreateTime = row.insertCell(4);
                  cellCreateTime.innerHTML = createTime;
                  var cellconfSize = row.insertCell(5);
                  cellconfSize.innerHTML = confSize;
                  var cellControll = row.insertCell(6);
                  cellControll.innerHTML = "<a href=/"#/">会议开始</a>";
                  var cellconfOver = row.insertCell(7);
                  cellconfOver.innerHTML = "<a href=/"#/">会议结束</a>";

            }
         }

                          //清除表格内容
         function clearTable(){
             var table=document.getElementById("confTable");
             for(var i=table.rows.length-1;i>0;i--)
             {
                 table.deleteRow(i);
             }
         }
    </script>

<SCRIPT type="text/javascript">

function conf_party_control()
     {
             window.location.href="<%=request.getContextPath()%>/confcontrol/conf_party_control.jsp";
   }
function control_over()
      {
   window.location.href="<%=request.getContextPath()%>/control!control_over.action";
    }

</SCRIPT>
</head>
<body οnlοad="sendRequest()">


<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
        <td width="10" bgcolor="#FFFFFF"></td>
             <td id="right" valign="top">
    <%@include file="/time.jsp" %>
      <div id="main">
       <h2><img src="<%=request.getContextPath()%>/img/right5.gif" width="20" height="20" border="0" />查询</h2>
      <table cellpadding="0" cellspacing="0" id="confTable">
        <tr>
          <th>序号</th>
          <th>会议主题</th>
          <th>会议召开时间</th>
          <th>会议结束时间</th>
          <th>会议预约时间</th>
          <th>参加人数</th>
          <th colspan="2">操作</th>
        </tr>
      </table>
   </div>
       </td>
       <td width="10" bgcolor="#FFFFFF"></td>
</tr>
</table>
<div id="footer">Copyright©xxxx-xxxx All rights reserved.</div>
</body>
</html>