第五节关于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>

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>

</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;

}

模拟情况一: 页面输出对象的详细信息

$(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>

</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;

}

$(function(){

$.post("load",function(data){

// 使用Jquery提供的工具，查看帮助文档

$.each(data,function(key,value){

$("ul").append("<li>"+value+"</li>");

});

})

</script>

<body>

<h2>显示对象信息</h2>

</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;

}

$(function(){

$.post("load",function(data){

//javascript当中的for循环

for(var key in data){

$("ul").append("<li>"+data[key]+"</li>");

}

});

})

</script>

</head>

<body>

<h2>显示对象信息</h2>

</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;

}

模拟情况二:加载更多 [分页]

$(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>

</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.anychart.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，因此我使用了投机取巧的办法
让查询之后的结构数据为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>

$(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>

</body>

</html>

//控制层代码，需要返回JSON数据，那么久需要jackson的三个jar包
@RequestMapping("/sys/chart")

@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);

}

<select
id="charRole"
resultType="map">

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的字符串
//1.如果使用JavaScript原生的方式转换JSON形式字符串转成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为对象
$.post("check",{account:account},function(data){

//给data对象新增属性

data.shxt="四海兴唐";

data["xy36"]="祥云36";

//将对象转换成JSON形式的字符串

alert(JSON.stringify(data));

},"json");

第五节关于SpringMVC中Ajax的配置和应用[下午]的更多相关文章

Springmvc中ajax与jason应用
Springmvc中ajax与jason应用相关依赖包 json数据转换的jar包 jackson-annotations-2.5.4 jackson-core-2.5.4 jackson-data ...
JavaEE开发之SpringMVC中的路由配置及参数传递详解
在之前我们使用Swift的Perfect框架来开发服务端程序时,聊到了Perfect中的路由配置.而在SpringMVC中的路由配置与其也是大同小异的.说到路由,其实就是将URL映射到Java的具体类 ...
springMVC中ajax的使用
springMVC中使用ajax有两种方法,第一种是根据servletAPI来使用ajax,第二种是根据springMVC给我们提供的API来使用. 一.根据servletAPI: springMVC ...
【Java框架型项目从入门到装逼】第五节 - 在Servlet中接收和返回数据
在上一节的程序中,我们可以看到HttpServletRequest, HttpServletResponse这两个对象.可以说,这是JavaWeb中至关重要的两个对象.接下来,我们来做一个简短的说明: ...
springMVC 中 ajax get 请求和 post 请求的坑以及参数传递
1, ajax 请求无论为 post ,或者 get ,url中带有?形式的参数,后台都能以String类型变量接收,变量名称和参数名称必须一致前台ajax: $.ajax( "prod ...
springMVC中ajax的运用于注意事项
ajax的运用: 注意事项: dataType:"json"在ajax中可写可不写(ajax能够自动识别返回值类型),写了更加规范,可以在ajax识别错误返回值类型的时候,指定返回 ...
第七节认识SpringMVC中的表单标签
所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签回顾: JSTL标签 --C标签 FMT标签自学:JSP如何自定义标签[开源社区当 ...
第一百八十五节，jQuery，Ajax 表单插件
jQuery,Ajax 表单插件学习要点: 1.核心方法 2.option 参数 3.工具方法传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...
springMVC中ajax和后台数据格式错误
前台ajax: $.ajax("${pageContext.request.contextPath}/hello",// 发送请求的URL字符串. { dataType : &qu ...

随机推荐

Redis总结（五）缓存雪崩和缓存穿透等问题
前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhong/category/771056.html .今 ...
JavaScript的因为所以
各位看官,楼主开始说过写几篇博客,这是这个系列的最后一集.吾以为:了解JavaScript的身世之谜,掌握其近乎心想事成的变量系统,了解其解析运行的偷梁换柱之法,熟悉布大师迂回曲折的OOP实现.那你离 ...
c# 轻量级 ORM 框架之 DBHelper 实现 (三)
周末了比较清闲,把自己的orm框架整理了下,开源了. 已经做出来的东西通常感觉有些简单,一些新手或许听到"框架"一类的词觉得有些"高深",简单来说orm就是把a ...
codeforces Gym 100187H H. Mysterious Photos 水题
H. Mysterious Photos Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100187/p ...
Android短信监听软件
本案例是在android手机中运行,是一个没有界面的短信监听软件.主要是用BroadcastReceiver来接受短信广播,当接收到短信后就跳转到service中来转发短信.哈哈,不是用来干坏事的.这 ...
C++删除字符串中特定的字符
原文:https://snipt.net/aolin/c-6/ //处理string类型的方法del_sp(string &str)待测试 //处理C-Style的方法可用,可以考虑将该方法改 ...
Python面试题汇总
原文:http://blog.csdn.net/jerry_1126/article/details/44023949 拿网络上关于Python的面试题汇总了,给出了自认为合理的答案,有些题目不错,可 ...
基于Bootstrap的jQuery开关按钮组合
Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...
shell导出和导入redis
1.导出redis #!/bin/bash REDIS_HOST=localhost REDIS_PORT=6379 REDIS_DB=1 KEYNAME=redis:hash:* KEYFILE=k ...
java 数组初始化
一维数组 1) int[] a; //声明,没有初始化 2) int[] a=new int[5]; //初始化为默认值,int型为0 3) int[] a={1,2,3,4,5} ...

第五节 关于SpringMVC中Ajax的配置和应用[下午]

第五节 关于SpringMVC中Ajax的配置和应用[下午]的更多相关文章

随机推荐

热门专题

第五节关于SpringMVC中Ajax的配置和应用[下午]

第五节关于SpringMVC中Ajax的配置和应用[下午]的更多相关文章