JavaScript和Struts2动态添加图片

JavaScript源码

功能：根据跳转链接monitor/alertdata.do链接，获取后台数据并将数据结果保存在dat变量中

根据dat变量中的alarm的值，确定需要加载的图片的链接

$(document).ready(function(){
	alertImg("monitor/alertdata.do", "table");
});

function alertImg(action,div) {
    $.post(action, function(dat){
    	switch(dat.alarm)
    	{
    	case "1":
    		document.getElementById("alertImg").innerHTML ='<img name="alertImg" src="./css/images/alert.gif" alt="alert" width="40" height="40" align="right">';
    		break;
    	default:
    		document.getElementById("alertImg").innerHTML ='<img name="alertImg" src="./css/images/normal.jpg" alt="alert" width="40" height="40" align="right">';
    	}
    })
}

JSP源码

主要注意div的id的名称和是否加载了javascript即可

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<style type="text/css">
<!--
.headbig {
    font-size: 30px;
    font-family: "Comic Sans MS", cursive;
}
.welcomeWords {
    text-align: right;
    font-size: 14px;
    font-weight: bold;
}
.backToIndex {
    font-weight: bold;
}
#apDiv1 {
    position:absolute;
    width:65px;
    height:59px;
    z-index:1;
    top: 74px;
    left: 754px;
}
table {
    margin:0 auto;
}
-->
</style>

<script src="js/alert.js" type="text/javascript"></script>

<table width="100%" height="109" border="0" background="./css/images/index_top_bg.png" class="welcomeWords">
  <tr>
    <td height="105"><table width="98%" height="102" border="0" align="center">
      <tr>
        <td width="170" height="82" rowspan="3"><img src="./css/images/DICE_logo_pic.png" width="99" height="96" alt="Dice_logo" align="left"></td>
        <td rowspan="3"><span class="headbig"> <p style="color:#FFF; font-weight: bold; text-align:left; font-size: 36px;">DICE 网络管理系统</p> 
        </span></td>
        <td width="17%" height="56" id="alertImg"><span style="color:#FFF; font-weight: bold;"></span></td>
        
      </tr>
      <tr>
        <td height="18" class="welcomeWords"><p class="welcomeWords" style="color:#FFF; font-size: 14px;"> 欢迎使用DICE OAM，<span style="color: #EEFE29; font-size: 16px;">${session.ADMIN_USERNAME_KEY}</span></p></td>
      </tr>
      <tr>
        <td height="18" align="right"><a href="/oam/index/main.html" title="退回登录页面" target="_top" class="backToIndex"><p style="color:#FFF; font-size: 14px;">退出</p></a></td>
      </tr>
    </table></td>
  </tr>
</table>