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

还有一周，祥云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#使用SMTP发送邮件

    需要用到的命名空间: using System.Net.Mail; using System.IO; using System.Text.RegularExpressions; using Syste ...

  2. jQuery 的选择器

    本文来自网上转帖 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, ...

  3. RFIDler - An open source Software Defined RFID Reader/Writer/Emulator

    https://www.kickstarter.com/projects/1708444109/rfidler-a-software-defined-rfid-reader-writer-emul h ...

  4. IAR EWARM Argument variables $PROJ_DIR$ $TOOLKIT_DIR$

    在IAR中的help中输入argument variables时会找到这样的一个列表: Argument variables On many of the pages in the Options d ...

  5. python基于http协议编程：httplib,urllib和urllib2<转>

    httplib实现了HTTP和HTTPS的客户端协议,一般不直接使用,在python更高层的封装模块中(urllib,urllib2)使用了它的http实现. httplib.HTTPConnecti ...

  6. Java常见排序算法之快速排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  7. Cocos2D-x权威指南:通过节点控制屏幕中的全体渲染对象

    本节,已经能够利用我们眼下所学的知识做出一些有趣的东西.之前已经说过,CCNode类没有贴图,也就是说在屏幕上单独建立一个节点是没有不论什么效果的,可是能够通过这个"无形"的节点来 ...

  8. 容器的end()方法

    容器的end()方法,返回一个迭代器,需要注意:这个迭代器不指向实际的元素,而是表示末端元素的下一个元素,这个迭代器起一个哨兵的作用,表示已经处理完所有的元素. 因此,在查找的时候,返回的迭代器,不等 ...

  9. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  10. 点击次数(thinkphp)

    protected function addHit($tbName, $id) { //定义变量:作为一个查询条件 $where = array( 'deleted' => 0, 'hidden ...