如何使用SpringMvc生成json数据并返回ajax接收并显示

对于SpringMvc如何生成json数据,需要根据所使用的spring版本来确定所用的jar包.

我这里使用的是Spring3

 所以所导入的jar包为

jackson-mapper-asl-*.jar
jackson-core-asl-*.jar

如果是之前的版本spring,包应该是这三个

下面直接上代码:

Web.xml

 控制层

	  @RequestMapping(value = "/selectElevatorByBrand", produces = "application/json;charset=UTF-8")
		  @ResponseBody
		  public  List<Brand>  selectElevatorByBrand( HttpServletRequest request,
			HttpSession session) {
		elevatorList =  elevatorService.selectAllElevatorByAll();
		Map<String, Integer> map2 = new HashMap<>();
  		Map<String, List<Elevator>> map = new HashMap<>();
		 for(Elevator elevator : elevatorList) {
		     String key = elevator.getBrandName();
		     if(map.containsKey(key)) {
		         //map中存在以此id作为的key,将数据存放当前key的map中
		         map.get(key).add(elevator);
		     } else {
		         //map中不存在以此id作为的key,新建key用来存放数据
		         List<Elevator> elevatorList2 = new ArrayList<>();
		         elevatorList2.add(elevator);
		         map.put(key, elevatorList2);
		     }
		 }
		 List<Brand>  brandList = new ArrayList();
		 Iterator<Entry<String, List<Elevator>>> iter = map.entrySet().iterator();
			while (iter.hasNext()) {
				Map.Entry entry = (Map.Entry) iter.next();
				System.out.println("[Key] : " + entry.getKey() + " [Value] : " + 
				entry.getValue()
						);
				List<Elevator> elevatorList2 = (List<com.em.po.Elevator>) entry.getValue();
			    System.out.println(elevatorList2.size());
			    Brand b = new Brand();
			    b.setName(""+entry.getKey());
			    b.setSumNum(elevatorList2.size());
			    brandList.add(b);
			}
        
		return brandList;
	}

网页页面中

    <div class="admin"
        style="text-align: center;line-height: 800px;font-size: 36px;font-family: '楷体'">

        <div id="main"
            style="width: 600px;height:400px; border:2px solid red;"></div>
    </div>
    <script>
        $(document)
                .ready(
                        function() {
                            $
                                    .ajax({
                                        dataType : "json",
                                        type : "post",
                                        url : "/elevatorMaintenanceSystem/selectElevatorByBrand",
                                        success : function(data) {
                                            console.log(data);
                                            var myChart = echarts.init(document
                                                    .getElementById('main'));
                                             var butt = eval(data);//这个可以将字符串转化为变量对象
                                             var brandName=[];
                                             var brandNum=[];
                                            for ( var i = 0; i < butt.length; i++) {
                                                    console.log(butt[i]);
                                                    brandName[i]=butt[i].name;
                                                     brandNum[i]=butt[i].sumNum;
                                               
                                            }
                                            // 指定图表的配置项和数据
                                            var option = {
                                                title : {
                                                    text : '各电梯品牌使用数量可视化',
                                                },
                                                tooltip : {
                                                    show : true,
                                                    trigger : 'item' //axis-坐标轴触发  item--数据条目触发
                                                },
                                                legend : {
                                                    data : [ '销量' ],
                                                    show : true
                                                },
                                                xAxis : {
                                                    position : 'bottom', //top
                                                    data : brandName
                                                },
                                                yAxis : {
                                                    show : true,
                                                    position : 'left' //left
                                                },
                                                series : [ {
                                                    name : '销量', //要和legend中的data对应起来
                                                    type : 'bar',
                                                    data : brandNum
                                                } ]
                                            };
                                            // 使用刚指定的配置项和数据显示图表。
                                            myChart.setOption(option);
                                        }
                                    });
                        });

        // 基于准备好的dom,初始化echarts实例
    </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_27526409

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值