如何使用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>