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

 

转自http://blog.liuweifeng.net/archives/407

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

$.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" )              }          });      }); });