js文件从Struts2 Action中获取数据全过程

本文链接：https://blog.csdn.net/classicbear/article/details/6859604

对应的Action类的源码：

import com.dice.voip.web.oam.base.BaseAction;
import com.dice.voip.web.oam.dao.SysInfo;
import com.dice.voip.web.oam.manager.SysInfoManager;

public class SysInfoAccountAction extends BaseAction {
	
	/**
	 * 
	 */
	private static final long serialVersionUID = -8080982970228144116L;

	private List<String> times;
	private List<Integer> nums;
 	
	public String execute() throws Exception
	{
		setNums(new ArrayList<Integer>());
		setTimes(new ArrayList<String>());
		
		SysInfoManager sysInfoManager = new SysInfoManager();
		List<SysInfo> sysinfos = sysInfoManager.getAccountNumByDay();
		
		Iterator<SysInfo> it = sysinfos.iterator();
		while(it.hasNext()){			
			SysInfo sysInfo = it.next();
			nums.add(sysInfo.getAccountNum());
			times.add( String.valueOf(sysInfo.getTime().getMonth()) + "-" + String.valueOf(sysInfo.getTime().getDay()));
		}
		return SUCCESS;	
	}

	public List<Integer> getNums() {
		return nums;
	}

	public void setNums(List<Integer> nums) {
		this.nums = nums;
	}

	public List<String> getTimes() {
		return times;
	}

	public void setTimes(List<String> times) {
		this.times = times;
	}
 }

对应的Javascript文件源码

$(document).ready(function(){
  linechart("performance/accountinfos", "datatest");
});
 
/*
 * 曲线图
 * 参数：action：调用的action函数
 * 		 div：曲线图插入的页面
 * 	 	 title：曲线图的名称
 * 		 ytitle：曲线图y轴的名称
 *       dat: 传入数据
 */
function linechart(action,div ) {
     $.post(action, function(dat ){
         chart = new Highcharts.Chart({
            chart: {
                renderTo: div,
                defaultSeriesType: 'line',
                width: 700,
                height: 350,
                margin:[50, 30, 70, 30]
            },
            legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -300,
              y: 300,
            },
credits : {
                enabled:false
            },
            title: {
                text: 'DICE系统用户数量曲线图 ',
                style: {
                    margin: '10px 100px 0 0' // center it
                }
            },
            xAxis: {
                categories:dat.times ,
                labels:{
                    step:3,
                    align:'right'
                }
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y ;
                }
            },
            series: [{
                name: "用户数量 ",
                data: dat.nums 
            }]   
         });
     })
};

对应的JSP文件源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%>
<%@ taglib prefix="s" uri="/struts-tags"%>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <base href="<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>/" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>性能管理--DICE系统</title>
  <s:include value="/_head.jsp" /> 
  <link type="text/css" href="css/tab/style.css" rel="stylesheet"  /> 
  <script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/Highcharts/js/highcharts.js" type="text/javascript"></script>
<script src="js/performance/systemaccount.js" type="text/javascript"></script>
 </head>
<body>
<div id="container">
<s:include value="/_banner.jsp?index=3" />

<div id="inner">
<s:include value="/config/_left.jsp" />
<div class="right"> 
<div class="divline">
性能管理
</div><!--divline-->
<div id="datatest">
</div>
 

</div><!--right-->

</div><!--#inner-->


<s:include value="/_footer.jsp" />

<script type="text/javascript">
$(document).ready(function(){
	selected('#item1');
});
</script>

</div><!--#container-->
</body>
</html>