成熟，不是学会表达，而是学会咽下，
当你一点一点学会克制住很多东西，才能驾驭好人生。

还有一周，祥云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.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>

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

}

}

<!-- 接口实现类，唯一需要注意的方为resultType -->
<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的配置和应用[下午]的更多相关文章

  1. Springmvc中ajax与jason应用

    Springmvc中ajax与jason应用 相关依赖包 json数据转换的jar包 jackson-annotations-2.5.4 jackson-core-2.5.4 jackson-data ...

  2. JavaEE开发之SpringMVC中的路由配置及参数传递详解

    在之前我们使用Swift的Perfect框架来开发服务端程序时,聊到了Perfect中的路由配置.而在SpringMVC中的路由配置与其也是大同小异的.说到路由,其实就是将URL映射到Java的具体类 ...

  3. springMVC中ajax的使用

    springMVC中使用ajax有两种方法,第一种是根据servletAPI来使用ajax,第二种是根据springMVC给我们提供的API来使用. 一.根据servletAPI: springMVC ...

  4. 【Java框架型项目从入门到装逼】第五节 - 在Servlet中接收和返回数据

    在上一节的程序中,我们可以看到HttpServletRequest, HttpServletResponse这两个对象.可以说,这是JavaWeb中至关重要的两个对象.接下来,我们来做一个简短的说明: ...

  5. springMVC 中 ajax get 请求和 post 请求的坑以及参数传递

    1, ajax 请求 无论为 post ,或者 get ,url中带有?形式的参数,后台都能以String类型变量接收,变量名称和参数名称必须一致 前台ajax: $.ajax( "prod ...

  6. springMVC中ajax的运用于注意事项

    ajax的运用: 注意事项: dataType:"json"在ajax中可写可不写(ajax能够自动识别返回值类型),写了更加规范,可以在ajax识别错误返回值类型的时候,指定返回 ...

  7. 第七节 认识SpringMVC中的表单标签

    所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当 ...

  8. 第一百八十五节，jQuery，Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

  9. springMVC中ajax和后台数据格式错误

    前台ajax: $.ajax("${pageContext.request.contextPath}/hello",// 发送请求的URL字符串. { dataType : &qu ...

随机推荐

  1. 关于favicon.ico的使用

    http://www.cnblogs.com/LoveJenny/archive/2012/05/22/2512683.html

  2. SQLServer获取随机数据

    1.比较常见和好用的一种 SELECT TOP 10 *, NEWID() AS randomFROM tableORDER BY random --newid函数会随机生成一个guid,很长的一个字 ...

  3. HttpRequest类

    一.HttpRequest的作用 HttpRequest的作用是令到Asp.net能够读取客户端发送HTTP值.比如表单.URL.Cookie传递过来的参数. 返回字符串的那些值就不说了,那些基本上都 ...

  4. 2013 French Open Semifinal Press

    http://v.youku.com/v_show/id_XNTY4MTgzOTEy.html?firsttime=0 Novak, can you take any confirt   for qu ...

  5. 对.NET中Hashtable和ArryList的理解

    1．HashTabel 在.NET Framework中,Hashtable是System.Collections命名空间提供的集合对象,同时它也是一个可变长的数组,用于处理和表现类似key/valu ...

  6. poj 3660 Cow Contest（传递闭包 Floyd）

    链接:poj 3660 题意:给定n头牛,以及某些牛之间的强弱关系.按强弱排序.求能确定名次的牛的数量 思路:对于某头牛,若比它强和比它弱的牛的数量为 n-1,则他的名次能够确定 #include&l ...

  7. SQL注入原理解说，非常不错！

    原文地址:http://www.cnblogs.com/rush/archive/2011/12/31/2309203.html 1.1.1 摘要 日前,国内最大的程序猿社区CSDN站点的用户数据库被 ...

  8. 如何编写自己的Linux安全检查脚本？

    因为本人工作中要涉及到很多东西,审计(日志.数据神马的).源代码审计.渗透测试.开发一大堆东西,有些东西,越是深入去做,越会发现,没有工具或脚本,工作起来是有多么的坑. 工作的这段时间,自己写了几个工 ...

  9. SPA初试-1

    本篇内容是在上一次的基础上进行改进,对状态的定义进行了修改,一个状态的定义如下: function state(stateName, template, templateUrl) { this.sta ...

  10. hadoop2 作业执行过程之作业提交

    hadoop2.2.0.centos6.5 hadoop任务的提交常用的两种,一种是测试常用的IDE远程提交,另一种就是生产上用的客户端命令行提交 通用的任务程序提交步骤为: 1.将程序打成jar包: ...