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

三步实现这个功能：

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 onmouSEOver="this.className='bg_over';" onmouSEOut="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>

原文链接：https://www.f2er.com/ajax/165885.html

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

猜你在找的Ajax相关文章