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

前端之家收集整理的这篇文章主要介绍了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>

<body bgcolor="transparent">
<html:form action="exammanager.do?operation=showTestInformation">
<div id="right_table" class="float_left">
<table border="0" cellspacing="0" cellpadding="0" class="width_95">
<tr>
<td width="9"><img src="images/exammanager/table_1.gif" width="9" height="7" hspace="0" vspace="0" border="0" /></td>
<td class="bg_topright"><img src="images/exammanager/table_2_t.gif" width="48" height="7" /></td>
</tr>
</table>
<div id="table_out" class="width_95">

</div>
<table border="0" cellspacing="0" cellpadding="0" class="width_95" style="font-size:13px;">
<tr>
<td width="9"><img src="images/exammanager/table_4.gif" width="10" height="20" /></td>
<td valign="middle" class="bg_bottomright"><div id="page" class="algin_right">
</div></td>
</tr>
</table>
</div>

</html:form>
</body>
</html>

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

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):

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

<%@ 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" %>

<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相关文章