功能介绍：最近学习在做一个新闻管理系统，其中有一个模块做的是一个排行榜功能，分为东部联盟和西部联盟，当我点击他的时候，排行的数据会发生变化。由于这一块怎么整个页面中的一小块，所以使用的是局部刷新页面
给按键绑定点击事件，因为是使用的jQuery，获取他的class属性绑定，然后请求ajax，请求后台数据，因为最开始加载页面的时候就默认设置了显示东部的排名，所以页面设置了默认的style样式。请求后台请求完页面之后，后台返回的是json格式的数据，可以通过data.name的方式获取，我这里显示数据是删除原本有的数据，就是删除tbody下的所有tr之后，再重新循环数据将他追加到页面上，并且修改样式给用户表明当前显示的排行榜
$(".team").click(function () {var time = new Date().getTime();var region = $(this).attr("region");var id = $(this).attr("id");$.ajax({url:"articleController?type=ajax&"+time, // 请求路径type:"POST" , //请求方式//data: "username=jack&age=23",//请求参数data:{"regionflag":region},success:function (data) {$("tbody").find("tr").remove();for (var i = 0; i < data.length; i++) {var alltr="<tr style=\"line-height: 10px;\">\n" +"<td class=\"tname\" width=\"25%\">"+data[i].Tname+"</td>\n" +"<td class=\"ranking\" width=\"25%\">"+(i+1)+"</td>\n" +"<td class=\"win\" width=\"25%\">"+data[i].Win+"</td>\n" +"<td class=\"transport\" width=\"25%\">"+data[i].Transport+"</td>\n" +"</tr>";$("tbody:last").append(alltr);}if ("team1"==id){$("#team1").css("background-color","#0b1c39");$("#dong").css("color","#aaaaaa");$("#team2").css("background-color","");$("#xi").css("color","");}else {$("#team2").css("background-color","#0b1c39");$("#xi").css("color","#aaaaaa");$("#dong").css("color","");$("#team1").css("background-color","");}},//响应成功后的回调函数error:function () {$("#mages").val("出错啦");},//表示如果请求响应出现错误，会执行的回调函数dataType:"json"//设置接受到的响应数据的格式});})后台代码
我这里只是部分代码，所有可能不是很清晰，这里是后台获取数据，然后导入一个gson的jar包，将对象集合返回前台的时候转成json格式
String region=null;String regionflag = request.getParameter("regionflag");//排名区域if ("1".equals(regionflag)){region="东部";}else if ("2".equals(regionflag)){region="西部";}request.getSession().setAttribute("region",region);List<Team> teams = teamservice.SelectTeamRanking(region);Gson gson = new Gson();String s = gson.toJson(teams);response.getWriter().print(s);简单的来说就是，前台ajax请求后台，然后导包创建Gson对象，将对象集合转为json返回给前台，然后前台调用请求成功函数对接收到的数据进行页面展示
