第五节 关于SpringMVC中Ajax的配置和应用[下午]
|
|
成熟，不是学会表达，而是学会咽下， 还有一周，祥云19就算结算了， 小白，小蔡，2婷婷，小猴，小恒，小崔，小龙，小姜，小翔 --胖先生 83604162 |
AJAX即"Asynchronous，Javascript+XML"（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX=异步JavaScript和XML（标准通用标记语言的子集）。AJAX是一种用于创建快速动态网页的技术。
0.使用二阶段的返回数据形式GSON，request,response
1.关于SpringMVC中使用Ajax返回JSON数据的配置
A.需要使用相关的JAR包[jackson--jar]
2.示例关于注册验资
|
<head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <script type="text/javascript" src="resource/jquery.js"></script> <script type="text/javascript"> function toCheck(){ var account = $.trim($("#account").val()); $.post("reg",{account:account},function(data){ if(data.flag=="success"){ //其他操作 }else{ alert(data.message); return false } }); } </script> </head> <body> <h2>用户验证</h2> <input type="text" name="account" id="account" onchange="toCheck()"> </body> |
|
@RequestMapping("/reg") @ResponseBody //该注解会根据不同的类型，进行转换，最终把对象和集合等都转换成JSON对象 public Map<String,Object> test(String account){ Map<String,Object> map = new HashMap<>(); if("admin".equals(account)){ map.put("flag", "error"); map.put("message", "该账号已经被注册"); }else{ map.put("flag", "success"); } return map; } |
模拟情况一: 页面输出对象的详细信息
|
<script type="text/javascript" src="resource/jquery.js"></script> <script type="text/javascript"> $(function(){ $.post("load",function(data){ // 使用alert测试一下数据是否完整 // alert(JSON.stringify(data)); $("ul").append("<li>"+data.user_id+"</li>"); $("ul").append("<li>"+data.user_name+"</li>"); $("ul").append("<li>"+data.account+"</li>"); $("ul").append("<li>"+data.password+"</li>"); $("ul").append("<li>"+data.photo+"</li>"); }); }) </script> <body> <h2>显示对象信息</h2> <ul></ul> </body> |
@RequestMapping("/load") @ResponseBody public User load() { User user = new User(); user.setUser_id(1000); user.setAccount("wukong"); user.setUser_name("悟空"); user.setPassword("123456"); user.setPhoto("a.jpg"); return user; } |
|
<script type="text/javascript" src="resource/jquery.js"></script> <script type="text/javascript"> $(function(){ $.post("load",function(data){ // 使用Jquery提供的工具，查看帮助文档 $.each(data,function(key,value){ $("ul").append("<li>"+value+"</li>"); });
}); }) </script> <body> <h2>显示对象信息</h2> <ul></ul> </body> |
@RequestMapping("/load") @ResponseBody public User load() { User user = new User(); user.setUser_id(2000); user.setAccount("bajie"); user.setUser_name("八戒"); user.setPassword("123456"); user.setPhoto("a.jpg"); return user; } |
|
<script type="text/javascript" src="resource/jquery.js"></script> <script type="text/javascript"> $(function(){ $.post("load",function(data){
//javascript当中的for循环 for(var key in data){ $("ul").append("<li>"+data[key]+"</li>"); }
}); }) </script> </head> <body> <h2>显示对象信息</h2> <ul></ul> </body> |
@RequestMapping("/load") @ResponseBody public User load() { User user = new User(); user.setUser_id(1000); user.setAccount("wukong"); user.setUser_name("悟空"); user.setPassword("123456"); user.setPhoto("a.jpg"); return user; } |
模拟情况二:加载更多 [分页]
|
<script type="text/javascript" src="resource/jquery.js"></script> <script type="text/javascript"> $(function(){ initData(); }) function initData(){ $.post("list",function(data){ if(data!=null&&data.length>0){ for(var i=0;i<data.length;i++){ $("tbody").append("<tr><td>"+data[i].user_name+"</td></tr>"); } }
}); }
</script> </head> <body> <h2>显示一个用户的详细</h2> <table border="1"> <tbody></tbody> </table> <input type="button" value="加载更多" onclick="initData()"> </body> |
|
数据来源: @RequestMapping("/list") @ResponseBody public List<User> list(){ List<User> userList = new ArrayList<User>(); User user = new User(); user.setUser_id(1000); user.setAccount("wukong"); user.setPassword("123456"); user.setUser_name("悟空"); user.setPhoto("a.jpg"); userList.add(user); user = new User(); user.setUser_id(2000); user.setAccount("bajie"); user.setPassword("123456"); user.setUser_name("八戒"); user.setPhoto("a.jpg"); userList.add(user); return userList; } |
实战应用:统计图Chart
http://www.highcharts.com/ 开源并且在手机端的支持比较，学习成本比较低
http://echarts.baidu.com/ 百度出也是开源
http://www.fusioncharts.com/ 老牌子的公司，比较好看，部分免费试用
练习示例三:使用插件完成统计图操作
|
|
|
|
|
|
|
|
|
参考在线示例 : http://www.fusioncharts.com/dev/getting-started/building-your-first-chart.html
关于属性介绍 : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-properties.html
模拟环境为:查询角色拥有的人数有哪些?
|
-- 查询每个角色下拥有多少人,分组查询 SELECT r.role_name label, count(u.user_id) value FROM sys_role r LEFT JOIN sys_user u ON r.role_id = u.fk_role_id GROUP BY r.role_id |
因为图像化界面我们使用的数据格式为: [ {"label": "Alex","value": "25000"}, {"label": "Mark","value": "35000"}, {"label": "David","value": "42300"}, {"label": "Graham","value": "35300"}, {"label": "John","value": "31300"} ];
它所需要的KEY的名称为label和value，因此我使用了投机取巧的办法 |
首先我们需要通过控制层跳转到Controller层
|
@RequestMapping("/sys/shxt") public String toChart(){ return "jsp/chart"; } |
|
JSP代码如下:在这里唯一需要注意的就是路径问题，一定要看清楚，不这是<mate>标签 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="<%=path %>/resource/jquery.js"></script> <script type="text/javascript" src="<%=path %>/resource/fusioncharts/fusioncharts.js"></script><!--引入主类库--> <script type="text/javascript"> $(function(){ initData(); //调用方法进行数据初始化操作 }); function initData(){ $.post("<%=path %>/sys/chart",function(data){ //设置要显示什么样子的统计图，标题等等，需要查看之前的地址中有API的属性 var json = { chart:{ yaxisname:"Y轴的名称", caption:"显示的主标题", numbersuffix:"人",//设置前缀 useroundedges:"1", bgcolor:"FFFFFF,FFFFFF", showborder:"0" } }; json.data = data;//给JSON增加属性data var data = JSON.stringify(json);//需要JSON形式的字符串
var chart = new FusionCharts("Column2D.swf", "ChartId", "650", "300", "0", "0"); //创建一个FusionCharts对象，第一个参数为swf文件的路径，第二个为id用来标识这个对象，第三个为宽度，第四个为高度 chart.setJSONData(data); chart.render("shxt");//将FusionCharts对象填充到指定的div标签处：render（div） }); } </script> </head> <body> <div id="shxt">在这加载图形</div><!--定义一个div用于存放图形-->
</body>
</html> |
|
//控制层代码，需要返回JSON数据，那么久需要jackson的三个jar包 @ResponseBody public List<Map<String,Object>> chartRole(){ IUserService userService = new UserServiceImpl(); return userService.charRole(); } |
//调用接口实现类 @Override public List<Map<String, Object>> charRole() { SqlSession sqlSession=null; try { sqlSession = MyBatisUtils.getSqlSession(); return sqlSession.getMapper(UserMapper.class).charRole(); } finally { MyBatisUtils.closeSqlSession(sqlSession); }
} |
|
<!-- 接口实现类，唯一需要注意的方为resultType --> SELECT r.role_name label, count(u.user_id) value FROM sys_role r LEFT JOIN sys_user u ON r.role_id = u.fk_role_id GROUP BY r.role_id </select> |
|
|
胖先生的微信 |
感觉该文章对你有所帮助，请点击 推荐↓↓↓↓↓↓↓↓↓↓ |
谢谢，小白的支持！
|
补充知识点:
A.关于JSON形式的字符串转换为JSON对象的方式
|
//说明:变量data为json的字符串 var shxt = eval("("+data+")");//这种方法一定要记住，以防方一 alert(shxt.flag+"---"+shxt["flag"]) //-------------分割线-------------------// //2.如果你的浏览器版本在IE9以上 var a = JSON.parse(data); alert(a.message+"-----"+a["flag"]); //-------------分割线-------------------// //使用jquery帮我们自动完成转换 $.post("check",{account:account},function(data){
},"json");
|
B.关于把对象转换为JSON形式的字符串的方法
|
//说明:变量data为对象 //给data对象新增属性 data.shxt="四海兴唐"; data["xy36"]="祥云36"; //将对象转换成JSON形式的字符串 alert(JSON.stringify(data));
},"json"); |
