JavaScript和Struts2动态添加图片

来源：互联网发布：python 等待完成编辑：程序博客网时间：2024/05/19 18:38

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>