Spring3 MVC Hello World（3）使用JSON進行先後臺數據交互

在 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