Spring3 MVC 使用JSON进行前后台数据交互
http://wbj0110.iteye.com/blog/2007918
在 Spring3 中,响应、接受 JSON都十分方便。
向前台返回 JSON 格式的数据:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@RequestMapping (value = "/list" , method = RequestMethod.GET)
@ResponseBody public Map<String, Object> getUserList() {
logger.info( "列表" );
List<UserModel> list = new ArrayList<UserModel>();
UserModel um = new UserModel();
um.setId( "1" );
um.setUsername( "sss" );
um.setAge( 222 );
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>( 3 );
modelMap.put( "total" , "1" );
modelMap.put( "data" , list);
modelMap.put( "success" , "true" );
return modelMap;
} |
使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON。
Spring这个转换是靠org.codehaus.jackson这个组件来实现的,所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包,并且在web.xml中配置:
1
2
3
4
5
6
7
8
9
|
< bean class = "org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" >
< property name = "messageConverters" >
< util:list id = "beanList" >
< ref bean = "mappingJacksonHttpMessageConverter" />
</ util:list >
</ property >
</ bean >
< bean id = "mappingJacksonHttpMessageConverter" class = "org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
|
在Controller中接受参数也非常简单:
1
2
3
4
5
6
7
8
9
10
11
|
@RequestMapping (value= "/{id}" ,method=RequestMethod.GET)
@ResponseBody public UserModel getUserById( @PathVariable String id)
{ logger.info( "取值" );
UserModel um = new UserModel();
um.setId(id);
um.setUsername( "sss" );
um.setAge( 222 );
return um;
} |
这样,可以访问类似于 http://localhost:8080/demo/user/1.do 来获取 id 为 1 的用户数据。
另外,在前台表单中向后台提交数据也非常方便:
1
2
3
4
5
6
7
8
9
10
|
@RequestMapping (value= "/add" ,method=RequestMethod.POST)
@ResponseBody public Map<String, String> addUser( @RequestBody UserModel model)
{ logger.info( "新增" );
logger.info( "捕获到前台传递过来的Model,名称为:" +model.getUsername());
Map<String, String> map = new HashMap<String, String>( 1 );
map.put( "success" , "true" );
return map;
} |
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON,Spring 会自动将其拼装成 bean。
这样,Controller可以返回给前台JSON,也可以接收JSON。
而在前台,我们可以用 jQuery 来处理 JSON。
从这里,我得到了一个 jQuery 的插件,可以将一个表单的数据返回成JSON对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$.fn.serializeObject = function (){
var o = {};
var a = this .serializeArray();
$. each (a, function (){
if (o[ this .name]) {
if (!o[ this .name].push) {
o[ this .name] = [o[ this .name]];
}
o[ this .name].push( this .value || '' );
}
else {
o[ this .name] = this .value || '' ;
}
});
return o;
}; |
以下是使用 jQuery 接收、发送 JSON 的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/** * @author liuweifeng
*/
$(document).ready( function (){
jQuery.ajax({
type: 'GET' ,
contentType: 'application/json' ,
url: 'list.do' ,
dataType: 'json' ,
success: function (data){
if (data && data.success == "true" ) {
$( '#info' ).html( "共" + data.total + "条数据。<br/>" );
$.each(data.data, function (i, item){
$( '#info' ).append( "编号:" + item.id + ",姓名:" + item.username +
",年龄:" +
item.age);
});
}
},
error: function (){
alert( "error" )
}
});
$( "#submit" ).click( function (){
var jsonuserinfo = $.toJSON($( '#form' ).serializeObject());
alert(jsonuserinfo);
jQuery.ajax({
type: 'POST' ,
contentType: 'application/json' ,
url: 'add.do' ,
data: jsonuserinfo,
dataType: 'json' ,
success: function (data){
alert( "新增成功!" );
},
error: function (){
alert( "error" )
}
});
});
}); |
代码下载:http://www.box.net/shared/ia6qht3hfu
Spring3 MVC 使用JSON进行前后台数据交互的更多相关文章
- Spring MVC 前后台数据交互
本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址地址:<Spring MVC 前后台数据交互> 1.服务端数据到客户端 (1)返回页面,Controller中方法 ...
- JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
- Phonegap开发的前后台数据交互
在用Phonegap开发时,需要进行前后台数据交互,在网上找资料,很多东西让人一头雾水,最后借鉴了下面的博客: http://blog.sina.com.cn/s/blog_681929ae01017 ...
- Django学习笔记(8)——前后台数据交互实战(AJAX)
这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...
- 用PHP和Ajax进行前后台数据交互——以用户登录为例
很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...
- vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总
目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...
- springmvc+json 前后台数据交互
1. 配置(1) 文件配置参考这里(2) 导入jackson相关包:jackson-annotations-2.9.4.jar,jackson-core-2.9.4.jar,jackson-datab ...
- 测开之路一百五十四:ajax+json前后台数据交互
在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...
随机推荐
- Hyper-V的三种网卡
External ======= 虚拟机和物理网络.本地主机都能通信 Internal ======= 虚拟机之间互相通信,并且虚拟机能和本机通信 Private ======= 仅允许运行在这台物理 ...
- CactiEZ 中文版V10.1安装使用以及139邮箱短信报警设置
说明:CactiEZ中文版V10.1是基于CentOS 6.0系统,整合Cacti等相关软件,重新编译而成的一个操作系统! 说明:CactiEZ中文版V10.1是基于CentOS 6.0系统,整合 ...
- 设置Activity显示和关闭时的动画效果
设置Activity显示和关闭时的动画效果 通过overridePendingTransition方法可以设置Activity显示和关闭的动画效果.首先需要在res/anim目录中建立相应的动画资源文 ...
- 纯css实现三角形
在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现.如下: 向上的三角形 向右的三角形 向下的三角形 向左的三角形 实现它们的css分别是: .top ...
- ucenter 通信原理个人总结
用户登陆discuz,调用on_login() , on_login ()里调用了userlogin() 验证用户信息,正确的话,调用uc_user_synlogin(),然后调用uc_api_pos ...
- mysql 获取当前日期及格式化
MYSQL 获取当前日期及日期格式获取系统日期: NOW()格式化日期: DATE_FORMAT(date, format)注: date:时间字段format:日期格式 返回系统日期,输出 2009 ...
- 不在界面上用控件 动态创建idhttp,IdAntiFreeze来用
不在界面上用控件 动态创建idhttp,IdAntiFreeze来用 var IdHTTP: Tidhttp; IdAntiFreeze: TidAntiFreeze; begin IdAntiFre ...
- SVM的点滴
SVM 1. 普通SVM的分类函数可表示为: 其中ai为待优化参数,物理意义即为支持向量样本权重,yi用来表示训练样本属性,正样本或者负样本,为计算内积的核函数,b为待优化参数. 其优化目标函数为: ...
- 利用http实现文件的上传和下载
其他语言都比较方便,使用http上传.但是C++这样就差点,不过还好,Linux下有个curl的命令行工具,这是一个开源项目,底下有个子项目是libcurl,curl就是调用这个API实现的一系列ft ...
- /usr/lib64/python2.6/site-packages/pycurl.so: undefined symbol: CRYPTO_set_locking_callback
[root@frontend01 yum.repos.d]# cd /etc/yum.repos.d;wget http://rpms.adiscon.com/v8-stable/rsyslog.re ...