ajax實現非同步載入頁面，實現資訊即時更新

最後更新：2018-07-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

三步實現這個功能：

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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More