ajax实现异步加载页面，实现信息实时更新

最新推荐文章于 2022-07-03 15:16:44 发布

wenzhihui_2010

最新推荐文章于 2022-07-03 15:16:44 发布

阅读量2.2k

点赞数

分类专栏： jquery ajax--json

本文链接：https://blog.csdn.net/wenzhihui_2010/article/details/10894719

版权

ajax--json 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jquery

8 篇文章 0 订阅

订阅专栏

三步实现这个功能：

1、母页面：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/config/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/config/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/config/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/config/ajj-html.tld" prefix="ahtml"%>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@ page isELIgnored="false" %>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="cssLib/style_exammanager.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript" charset="gb2312"> </script>
<script language="javascript" type="text/javascript">
   setInterval(show,120000);//定时执行show方法，进行实时刷新考试信息
$(document).ready(function(){
       show();
     });
function show(){
      $("#table_out").html("信息加载中...");
    $.post("exammanager.do",
    {
     operation:"showExam"
    },
    function(data){//这里返回的data是一个页面（这个页面就一个table，不包括body等）
     $("#table_out").html(data);//把返回页面嵌入当前页面的div中
      }
    );
   }
</script>
</head>

===================================

2、后台action的方法：

=====================================

public ActionForward showExam(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response){

  List list=service.getRealTimeExamImformation();
  request.setAttribute("list", list);
  return mapping.findForward("showtest_table");
}

===========================

3、ajax返回的子页面（showtest_table.jsp）：

===========================================

    <table style="font-size:13px;" width="100%" border="0" cellpadding="0" cellspacing="0" class="border_1px">
  <tr>
   <th><div class="title_th">联系方式</div><div class="title_line float_right">|</div></th>
   <th><div class="title_th">姓名</div><div class="title_line float_right">|</div></th>
   <th><div class="title_th">性别</div><div class="title_line float_right">|</div></th>
   <th><div class="title_th">身份证号码</div><div class="title_line float_right">|</div></th>
   <th><div class="title_th">准考证号码</div><div class="title_line float_right">|</div></th>
   <th><div class="title_th">考试时间</div><div class="title_line float_right">|</div></th>
   <th><div class="title_th">考试状态</div><div class="title_line float_right">|</div></th>
  </tr>
   <logic:present name="list">
    <logic:iterate id="list" indexId="index" name="list">
     <tr οnmοuseοver="this.className='bg_over';" οnmοuseοut="this.className='bg_out';">
      <td>
          <c:if test="${list.lxdh006==''||list.lxdh006==null}">
                              无联系电话
          </c:if>

              <ahtml:write name="list" property="lxdh006" type="lxdh"/>
      </td>
      <td>
       <ahtml:write name="list" property="xm006" type="xm"/>
      </td>
      <td>
       <ahtml:write name="list" property="xb006" type="xb"/>
      </td>
      <td>
       ${list.sfzhm006}
      </td>
      <td>
       <ahtml:write name="list" property="kswyh007" type="kswyh"/>
      </td>
      <td>
      <bean:write name="list" property="kssj059" format="yyyy-MM-dd HH:mm:ss"/>
      </td>
      <td>
        <c:if test="${list.jj059=='1'}">
                                   已交卷
        </c:if>
        <c:if test="${list.jj059=='2'}">
                 ${list.zwapID059}
        </c:if>
         <c:if test="${list.jj059=='0'}">
                   <font color="red">未考</font>
         </c:if>
      </td>
     </tr>
    </logic:iterate>
   </logic:present>
  </table>