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

还有一周，祥云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. C#以及Oracle中的上取整、下取整方法

    1.C#中: 上取整——Math.Ceiling(Double),即返回大于或等于指定双精度浮点数的最大整数(也可称为取天板值): eg:  Math.Ceiling(1.01)=2;      Ma ...

  2. CentOS FireFox Flash Player

    yum install *firefox* yum install flash-plugin

  3. js 原型模型重写1

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. wikioi 1098 均分纸牌

    题目描述 Description 有 N 堆纸牌,编号分别为 1,2,-, N.每堆上有若干张,但纸牌总数必为 N 的倍数.可以在任一堆上取若于张纸牌,然后移动. 移牌规则为:在编号为 1 堆上取的纸 ...

  5. 查看sid

    查看用户sid: whoami /user 查看系统sid: 使用PSTools工具中的 psgetsid.exe命令查看

  6. 关于form.submit()不能提交表单的错误原因

    来源:http://www.ido321.com/948.html 直接上代码把: 1: <div id="register"> 2: <h4>会员注冊&l ...

  7. C#调用Excel VBA宏

    近日的一系列工作是做网站的营运维护,因此做了大量的支持工具.有Excel中写VBA的,也有直接C#做的工具.有时需要在C#中执行Excel VBA宏,甚至有时还需要在执行了VBA宏之后,获取返回值再进 ...

  8. win7远程桌面连接

    远程桌面连接 1.在防火墙上设置同意同意远程桌面通过防火墙: 2.为管理员设置password.以便訪问者訪问: 3.我的电脑-右键属性-远程设置-远程-选上"同意远程协助远程这台计算机.同 ...

  9. 如何理解js

    1.js/dom功能 2.performance 3.code organization 4.tools and flow 如何理解js代码,代码即业务. 如何快速理解代码业务.

  10. PHP 自动生成导航网址的最佳方法 v20130826

    经常制作开发不同的网站的后台,写过很多种不同的后台导航写法. 最终积累了这种最写法,算是最好的吧.附上截图和代码如下(PHP+HTML) <?php $linkArr = array( 'ind ...