SSH,Ajax 实现后端数据库获取数据，前端动态更新

适用场景：SSH+Ajax+MySQL
业务逻辑：从后端数据库Alarm表中获取前10条记录，并每隔10秒在前端网页实时显示

直接上代码~

AlarmDAO.java

package alarmManagement.dao;

import hibernatePOJO.Alarm;
import java.util.List;

public interface AlarmDAO {
    //从数据库获取告警信息
    public List<Alarm> getAlarmInfo();
}

AlarmDAOImpl.java

package alarmManagement.dao.impl;

import Util.HBSessionDaoImpl;
import alarmManagement.dao.AlarmDAO;
import hibernatePOJO.Alarm;

import javax.persistence.Query;
import java.util.List;

public class AlarmDAOImpl implements AlarmDAO {

    @Override
    public List<Alarm> getAlarmInfo() {
        HBSessionDaoImpl hbsessionDao = new HBSessionDaoImpl();
        List<Alarm> alarmInfoList = hbsessionDao.searchWithFirstNum(
                "FROM Alarm",10);
        return alarmInfoList;
    }
}

GetAlarmInfoAction.java

package alarmManagement.action;

import alarmManagement.dao.AlarmDAO;
import alarmManagement.dao.impl.AlarmDAOImpl;
import com.alibaba.fastjson.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
import hibernatePOJO.Alarm;
import org.apache.struts2.ServletActionContext;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.List;

public class GetAlarmInfoAction extends ActionSupport {

    private static final long serialVersionUID = 13L;
    private JSONObject result;

    public JSONObject getResult() {
        return result;
    }

    public void setResult(JSONObject result) {
        this.result = result;
    }

    //获取告警信息
    public String execute() throws Exception {
        try{
            HttpServletRequest request = ServletActionContext.getRequest();
            HttpSession session = request.getSession();
            AlarmDAO dao = new AlarmDAOImpl();
            List<Alarm> alarmInfoList=dao.getAlarmInfo();
            JSONObject jsonObject=new JSONObject();
            jsonObject.put("alarmInfo",alarmInfoList);
            result=jsonObject;
        } catch (Exception e){
            e.printStackTrace();
            return "error";
        }
        return "success";
    }

}

struts.xml

<action name="getAlarmInfo" class="alarmManagement.action.GetAlarmInfoAction">
            <!-- 从数据库获取告警信息 -->
            <result name="failure">/failure.jsp</result>
            <result name="success" type="json">
                <param name="root">result</param>
            </result>
        </action>

liveAlarmInfo.js

//页面加载完成，绑定定时更新
$(document).ready(function () {
    //定时更新函数，每10秒更新告警信息
    setInterval(function () {
        let headingContent=document.querySelectorAll('.heading-content');
        let cardBody=document.querySelectorAll('.card-body');
        let btnLink=document.querySelectorAll('.btn-link');
        /*
        ajax局部更新，调用getAlarmInfoAction
        获取数据：alarmId(告警编号)|alarmTypeId(告警类型ID)|alarmSeverity(告警级别)|alarmSpec(告警描述)
                alarmRaiseTime(告警产生时间)
        */
        $.ajax({
            type:'get',
            url:'getAlarmInfo',
            dataType:'json',
            success:function (result) {
                let alarmInfoArray=result.alarmInfo;
                for(let i=0;i<alarmInfoArray.length;i++){
                    let alarmId=alarmInfoArray[i].alarmId;
                    let alarmTypeId=alarmInfoArray[i].alarmTypeId;
                    let alarmSeverity=alarmInfoArray[i].alarmSeverity;
                    let alarmSepc=alarmInfoArray[i].alarmSpec;
                    let alarmRaiseTime=alarmInfoArray[i].alarmRaiseTime.toString().replace('T',' ');   //去掉datetime格式中的'T'
                    //按照告警级别，分不同颜色显示(1级红色，2级黄色，3级蓝色，4级绿色),按钮下划线也对应变化
                    switch (alarmSeverity) {
                        case 1:
                            headingContent[i].style.color='red';
                            btnLink[i].style.color='red';
                            break;
                        case 2:
                            headingContent[i].style.color='yellow';
                            btnLink[i].style.color='yellow';
                            break;
                        case 3:
                            headingContent[i].style.color='blue';
                            btnLink[i].style.color='blue';
                            break;
                        default:
                            headingContent[i].style.color='green';
                            btnLink[i].style.color='green';
                    }
                    headingContent[i].textContent=alarmId+'\xa0\xa0类型ID: '+alarmTypeId+'| 产生时间: '+alarmRaiseTime;   //'\xa0'表示小空格
                    cardBody[i].textContent=alarmSepc;
                }
            }
        });
        },10000);
});

这个js文件是实现前后端实时交互的关键。.ajax需要放在函数中进行触发。type为获取后端数据的方式，有get和post。url为对应的action，数据也是从action中获取。dataType为数据格式。最后在success属性中写fuction()，代表成功获取后端数据后执行的操作，其中result即为获取到的数据。

liveAlarmInfo.css

.body{
    background-color: transparent;
}
.card{
    background-color: transparent;
    overflow: auto;
    width: 100vw;
    margin-left: 0;
    padding-left: 0;
    border: hidden;
}
.card-header{
    padding: 0 2vw 0;
    font-size: 95%;
    border: hidden;
    background-color: transparent;
}
.card-body{
    color: white;
    font-size: 90%;
    padding-top: 2vh;
    padding-bottom: 2vh;
}
.btn{
    background-color: transparent;
    border-style: none;
    width: 75vw;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    vertical-align: baseline;

}
.heading-content{
    font-size: 95%;
    margin-bottom: 0;
    margin-left: -1vw;
}
#accordion{
    width: 100vw;
    height: 70vh;
    margin-left: 0;
    padding-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

liveAlarmInfo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!-- 引入struts的标签库-->
<%@ taglib uri="/struts-tags" prefix="s" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="Violate Responsive Admin Template">
    <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
    
    <title>机房监控</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!--引入css-->
    <link rel="stylesheet" href="../../css/css-UI/alarm-management/liveAlarmInfo.css">

    <!--liveAlarmInfo.js依赖jquery，defer按脚本出现顺序异步加载-->
    <script defer type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
    <script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script defer type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script defer type="text/javascript" src="../../js/js-UI/alarm-management/liveAlarmInfo.js"></script>

    <title>实时告警信息</title>
</head>
<body class="body">
<!--折叠面板-->
    <div id="accordion">
        <div class="card">
            <div class="card-header" id="heading-1">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-1" class="collapse show" aria-labelledby="heading-1" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-2">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-3">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-4">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-4" class="collapse" aria-labelledby="heading-4" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-5">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-5" class="collapse" aria-labelledby="heading-5" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-6">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-6" aria-expanded="false" aria-controls="collapse-6">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-6" class="collapse" aria-labelledby="heading-6" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-7">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-7" aria-expanded="false" aria-controls="collapse-7">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-7" class="collapse" aria-labelledby="heading-7" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-8">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-8" aria-expanded="false" aria-controls="collapse-8">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-8" class="collapse" aria-labelledby="heading-8" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-9">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-9" aria-expanded="false" aria-controls="collapse-9">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-9" class="collapse" aria-labelledby="heading-9" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="heading-10">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse-10" aria-expanded="false" aria-controls="collapse-10">
                    <p class="heading-content"></p>
                </button>
            </div>
            <div id="collapse-10" class="collapse" aria-labelledby="heading-10" data-parent="#accordion">
                <div class="card-body"></div>
            </div>
        </div>
    </div>

</body>
</html>

总体流程：jsp中嵌入的js利用Ajax触发对应的action——action的excute()调用DAO层的方法——访问数据库，获取数据——数据返回action——数据返回js，Ajax动态更新——jsp前端界面动态更新