dwr实现页面无刷加载

 

用dwr 实现页面无刷加载

首先先在后台写个javabean

package com.metarnet.faultanalysis.entity;

/**
 * Created by IntelliJ IDEA.
 * User: Administrator
 * Date: 11-12-19
 * Time: 上午10:43
 * To change this template use File | Settings | File Templates.
 */
public class SynDetail {
     private String msisdn;
     private String synStartTime ;
     private String synEndTime ;
     private String synResult ;
     private String synType;

    public String getSynEndTime() {
        return synEndTime;
    }

    public void setSynEndTime(String synEndTime) {
        this.synEndTime = synEndTime;
    }

    public String getSynResult() {
        return synResult;
    }

    public void setSynResult(String synResult) {
        this.synResult = synResult;
    }

    public String getSynStartTime() {
        return synStartTime;
    }

    public void setSynStartTime(String synStartTime) {
        this.synStartTime = synStartTime;
    }

     public String getMsisdn() {
        return msisdn;
    }

    public void setMsisdn(String msisdn) {
        this.msisdn = msisdn;
    }

    public String getSynType() {
        return synType;
    }

    public void setSynType(String synType) {
        this.synType = synType;
    }

 

}

里边放着页面要显示的内容，dwr方法中取到的数据库的内容要放到这个bean中

然后写我们需要的dwr方法

package com.metarnet.faultanalysis.dwr;

import com.metarnet.faultanalysis.entity.SynDetail;
import org.apache.log4j.Logger;
import org.directwebremoting.WebContextFactory;

import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import unisec.webservice.client.SecurityServiceImpl;
import unisec.webservice.client.SecurityServiceImplService;

import javax.servlet.http.HttpSession;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.*;

public class CfgDeviceDwr {

     public List<SynDetail> getSynDetailInfo(){
            String sql = "select msisdn,syn_starttime,syn_endtime,syn_result,syn_type from log_leader_syn_detail order by SYN_DATE desc ";
            List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);
            List<SynDetail> synDetailList = new ArrayList<SynDetail>();
            for(Map<String, Object> row : list) {
                SynDetail synDetail = new SynDetail();
                String msisdn = (String) row.get("msisdn");
                String synType = (String) row.get("syn_type");
                String synStartTime = row.get("syn_starttime").toString();
                String synEndTime = row.get("syn_endtime").toString();
                String synResult = (String)row.get("syn_result");
                synDetail.setMsisdn(msisdn);
                synDetail.setSynType(synType);
                synDetail.setSynStartTime(synStartTime);
                synDetail.setSynEndTime(synEndTime);
                synDetail.setSynResult(synResult);
                synDetailList.add(synDetail);
            }
            return synDetailList;
        }

 

}

写完后要把它们配置到dwr.xml中去

 

<?xml version="1.0" encoding="GB2312"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>
    <init>
        <creator id="scripted"
                 class="org.directwebremoting.create.ScriptedCreator"/>
    </init>

    <allow>

        <!--页面所用的Bean-->

                 <convert converter="bean"
                 match="com.metarnet.faultanalysis.entity.SynDetail">
               </convert>

        <!--页面所用的Dwr方法-->

        <!-- add by lxc faultanalysis -->
        <create creator="spring" javascript="CfgDeviceDwr">
            <param name="beanName" value="CfgDeviceDwr"/>
        </create>
           </allow>

    <signatures>
        <![CDATA[
      import java.util.*;
      import com.metarnet.trace.dwr.*;
    ]]>
    </signatures>
</dwr>

配置好以后就可以在页面中使用了

页面的代码

<%@ page import="com.metarnet.common.dwr.PageUtils" %>
<%--
  Created by IntelliJ IDEA.
  User: zhengshan
  Date: 2011-12-16
  Time: 14:20:04
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
  <head>
          <title>asasa</title>
          <script type="text/javascript" src="<%=request.getContextPath()%>/faultanalysis/js/My97DatePicker/WdatePicker.js"></script>
          <script type="text/javascript" src="faultanalysis.js"></script>
          <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/screen.css"/>
          <%@include file="/_lib/dwr/dwr-simple-utf8.inc"%>
          <%=PageUtils.includeDwr("CfgDeviceDwr")%>
   <script type="text/javascript">

     function refresh(){
        var timerId  = setInterval("getSynDetailInfo()",5000) ;
        alert(111);
 }

    $init = function getSynDetailInfo(){
    CfgDeviceDwr.getSynDetailInfo(CallBack);
 }

    function CallBack(data) {
        var rtn = new Array();
        if (data.length == 0) {
             alert("目前没有日志!");
         }else{
            rtn.push("<table align='center' width='80%'  border='1' cellpadding='0' cellspacing='0'>");
            rtn.push("<tr><td>msisdn</td><td>同步类型</td></tr>");
             for(var i=0;i<data.length;i++){
                //      addRow(data[i].admin_Name,data[i].admin_Pwd,data[i].mark_id);   // 表格添加一行
                rtn.push("<tr><td>");
                rtn.push(data[i].msisdn);
                rtn.push("</td><td>");
                rtn.push(data[i].synType);
                rtn.push("</td></tr>");
             }
            rtn.push("</table>");
            document.getElementById("mytable").innerHTML=rtn.join("");
    }
 }

 

    </script>     
  </head>
  <body>

              <div id="mytable"></div>

              <input type="hidden" name="maxrow" value="0">

  </body>
</html>