Spring3 MVC 使用JSON进行前后台数据交互

在 Spring3 中，响应、接受 JSON都十分方便。

向前台返回 JSON 格式的数据：

@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中配置：

< 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中接受参数也非常简单：

@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 的用户数据。

另外，在前台表单中向后台提交数据也非常方便：

@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对象：

$.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 的代码：

/**
  * @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