后台数组传递到前台<script>

来源：互联网发布：c语言 http post json 编辑：程序博客网时间：2024/05/16 07:59

后台创建整形数组

import java.util.ArrayList;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;public class JsonAction extends ActionSupport {    private static final long serialVersionUID = 1L;    public String execute() throws Exception {        ActionContext context=ActionContext.getContext();        ArrayList<Integer> list=new ArrayList<Integer>();        for(int i=0;i<12;i++)            list.add(i);        context.getSession().put("list", list);        return SUCCESS;    }}

前台利用jstl标准标签库获得数组对象

<c:set var="list" value="${list }" scope="session" />

利用EL表达式将list对象赋值给javaScript对象

<script language="JavaScript">var arrayList=${list};</script>

前端jsp源代码

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>报表</title><!-- css样式文件 --><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"><!-- jquery.js --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- bootsrap的js文件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script></head><body><div class="container">        <div class="row">            <div                class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">                <div id="container"                    style="width: 550px; height: 400px; margin: 0 auto"></div>            </div>        </div>    </div><form action="jsonAction.action" method="post"><input type="submit" value="提交"></form><c:set var="list" value="${list }" scope="session" /><script language="JavaScript">var arrayList=${list};$(document).ready(function() {   var title = {      text: '年度报表'      };   var subtitle = {      text: '网上书店'   };   var xAxis = {      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']   };   var yAxis = {      title: {         text: '销售总数 (本)'      },      plotLines: [{         value: 0,         width: 1,         color: '#808080'      }]   };      var tooltip = {      valueSuffix: '\xB0C'   }   var legend = {      layout: 'vertical',      align: 'right',      verticalAlign: 'middle',      borderWidth: 0   };   var series =  [      {         name: '每月销售数量',         data: arrayList,      }   ];   var json = {};   json.title = title;   json.subtitle = subtitle;   json.xAxis = xAxis;   json.yAxis = yAxis;   json.tooltip = tooltip;   json.legend = legend;   json.series = series;   $('#container').highcharts(json);});</script></body></html>

运行结果
这里写图片描述

阅读全文

'); })();